toast弹窗的用法_vue弹出提示框

toast弹窗的用法_vue弹出提示框效果图代码<!DOCTYPEhtml><htmllang=”en”> <head> <title>弹窗</title> <metacharset=”UTF-8″> <metaname=”viewport”content=”width=device-width,initial-sc…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

效果图

toast弹窗的用法_vue弹出提示框

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>弹窗</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style type="text/css">
			.toast {
				padding: 10px 25px 10px 25px ;
				background: rgba(0, 0, 0, .5);
				border-radius: 5px;
				color: #ffffff;
				text-align: center;
				position: fixed;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
				z-index: 100;
			}
		</style>
	</head>
	<body>
		<div id="test">
			<toast v-if='isShow' :message='isShowMsg'></toast>
			<div class="container" @click="showToast">
				点击显示 showToast
			</div>
		</div>
		<script>
			var that;
			Vue.component('toast', {
				props: ['message'],
				template: `
			    <div class="toast_bg_transparent">
			        <div class="toast">
			            <span>{
  
  {message}}</span>
			        </div>
			    </div>
			    `
			})
			new Vue({
				el: '#test',
				data() {
					return {
						isShow: false,
						isShowMsg: '', //弹窗提示
					}
				},
				methods: {

					showToast() {
						console.log('点击了 showToast')
						this.isShow = true;
						this.isShowMsg = '错误提示';

						setTimeout(() => {
							this.isShow = false;
						}, 1000);
					}
				},
				mounted() {}
			})
		</script>
	</body>
</html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189670.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • idea 2021激活码【最新永久激活】

    (idea 2021激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html40Z9P7H9NN-eyJsaWN…

  • 论SLAM技术发展趋势[通俗易懂]

    论SLAM技术发展趋势[通俗易懂]2018年7月底,深蓝学院发起并承办了“第一届全国SLAM技术论坛”。浙江大学章国锋老师、香港科技大学沈劭劼老师、上海交通大学邹丹平老师、中科院自动化所申抒含老师在“圆桌论坛:SLAM技术发展趋势”上分享了SLAM技术的趋势,现将内容整理公布,希望更多SLAMer受益。章国锋:由于我的研究方向更偏向于视觉SLAM,所以我会从我的角度来讲一讲SLAM技术的发展趋势。首先,我认为无论是视觉…

  • java保留两位小数输出

    java保留两位小数输出例如:运算结果输出-40-40.0066.66666.66学过c语言的人,一看到保留小数点后两位,第一时间可能就想到:printf(”%.2f”,x);其实在java语言中和c语言类似:System.out.print(”%.2f”,x);注意:格式化输出用的是System.out.print();而不是System.out.println();原创…

  • Windows7在自由的虚拟机(微软官方虚拟机)

    Windows7在自由的虚拟机(微软官方虚拟机)

    2021年12月17日
  • phpstorm 2022.01激活码【最新永久激活】

    (phpstorm 2022.01激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~E…

  • Pytest(1)安装与入门[通俗易懂]

    Pytest(1)安装与入门[通俗易懂]pytest介绍pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高。根据pytest的官方网站介绍,它

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号