vue写一个通用的toast弹窗 toast 弹窗提示

效果图

代码

<!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>

vue写一个通用的toast弹窗 toast 弹窗提示相关推荐

写一个通用数据访问组件
出处:http://www.csharp-corner.com willsound(翻译) 我收到过好多Email来问我如何用一个通用的数据提供者(data provider)在不失自然数据提供者(n ...
[html] 写一个水平竖直居中的弹窗，带遮罩层的布局
[html] 写一个水平竖直居中的弹窗,带遮罩层的布局 <div class="container"><div class="modal"&g ...
[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
java 通用组件_写一个通用数据访问组件
出处:http://www.csharp-corner.comwillsound(翻译)我收到过数据库出处:http://www.csharp-corner.com willsound(翻译) 我收 ...
用vue写一个npm包(package)，发布及引用
提示:vue写一个npm包(package) 文章目录前言一.npm 二.npm package开发三.引用package 总结前言之前一直都是用别人封装好的npm包,新接了一个需求,自己写 ...
用vue写一个计算总价
用vue写一个计算总价点击移除可以删除本项点击加减实现加减总价随着数量增加 <!DOCTYPE html> <html><head><meta char ...
VUE写一个本地教室管理系统
VUE写一个本地教室管理系统实现效果主体模态框 Vue JS主体 Vue实现删除功能 splice语法 Vue实现添加功能 push()语法 Vue实现修改功能源码实现效果点击添加按钮后, ...
JS-事件-写一个通用的事件监听函数
之前学习总是遇到问题再去研究表面知识,这是不可取的,在这里我们来写一个绑定事件的函数,以此巩固我们对JS事件相关知识点的理解在这里我会解释一下各个参数之间的关系 function bindEvent ...
VUE写一个顶部导航栏
最近一个实验要做一个中超足球联赛的数据库设计,我打算采用springboot+vue来完成,现在是从零开始学习vue的过程,先试着写一个顶部导航栏.效果如下: 新建一个navbar的组件首先在APP ...

vue写一个通用的toast弹窗 toast 弹窗提示

vue写一个通用的toast弹窗 toast 弹窗提示相关推荐

最新文章

热门文章

vue写一个通用的toast弹窗 toast 弹窗 提示

vue写一个通用的toast弹窗 toast 弹窗 提示相关推荐

最新文章

热门文章

vue写一个通用的toast弹窗 toast 弹窗提示

vue写一个通用的toast弹窗 toast 弹窗提示相关推荐