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)
blank

相关推荐

  • 通俗易懂的Latex教程文档[通俗易懂]

    通俗易懂的Latex教程文档[通俗易懂]本篇文档可以搭配视频讲解使用。讲解视频:通俗易懂的Latex教程(附数学建模国赛美赛模板)这是一份面向刚入门数模,想要快速上手Latex排版的同学的Latex教学文档。在线编辑网站overleaf:https://www.overleaf.com/我所使用的环境:TeXLive(自带编辑器TeXworks) 编辑器:TeXstudioTeXLive和TeXstud

  • 作为一个死忠粉,我的 IntelliJ IDEA 一直都是这样来设置的,效果很棒!

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:judasn https://github.com/judasn/IntelliJ-IDEA-Tutorial…

  • 360奇安信天擎卸载不干净_奇安信Ateam

    360奇安信天擎卸载不干净_奇安信Ateam360天擎是什么具体可以参考:百度:360天擎总之,一些单位里为了安全防护,会在单位的电脑上安装360天擎,如果你想用自己的笔记本电脑连上单位的网络的话,也会要求你安装。不安装就连不上网络,但安装之后,卸载又是一个很大的难题。用什么卸载其实网上会有很多强力卸载软件,甚至有些会强力到可以卸载系统文件,这类软件不建议使用(如果用的明白,请自便)。无效方式如,腾讯管家自带的软件管理有效方式如,联想电脑管家,和微软自带的卸载,如下图:点击右键->卸载->完成?不不不,这

  • SQLServer复制(二)–事务代理作业

    SQLServer复制(二)–事务代理作业

    2021年11月26日
  • Git拉取代码报密码错误「建议收藏」

    Git拉取代码报密码错误「建议收藏」刚刚Git拉取代码,显示密码错误。我就奇怪了,密码输入了好几次,还是错误。但是马上得提交了,又很着急 ,将最简单的处理 方法忘记了。冷静下来,细细分析。刚学习时好像遇到过此类问题,于是直接删除凭证,再次拉取,正常。真的越着急越乱,遇到问题还是要冷静分析。…

  • 用js来实现那些数据结构07(链表01-链表的实现)

    前面讲解了数组,栈和队列。其实大家回想一下。它们有很多相似的地方。甚至栈和队列这两种数据结构在js中的实现方式也都是基于数组。无论增删的方式、遵循的原则如何,它们都是有序集合的列表。在js中,我们新建

发表回复

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

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