vue2实现最简toast
- 最简toast
最简toast
之前用过基于 jQuery 的无阻塞式 toast，也用过基于 vue 的信息提示框，其实这玩意几行代码就能解决，不用引用一个几十 kb 的 js 和 css 文件。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>TOAST 测试</title><script src="vue-2.6.14.min.js"></script><style>.toast {position: fixed;top: 10px;right: 10px;background-color: #333;color: white;border-radius: 5px;padding: 15px;opacity: 0.8;transition: opacity 0.35;}</style>
</head>
<body><div id="app"><p>这是 vue 框架下最简单消息弹框插件</p><p>向你的网站访客发送一些易于定制的消息提醒、通知等等</p><p><button @click="test">点我测试 toast</button> </p><div class="toast" v-show="info" v-html="info"></div></div><script>new Vue({el: '#app',data: { info: '' },methods: {toast: function (s, t = 3) { // 参数3为消息停留时间this.info = s;setTimeout(e => { this.info = ''; }, t * 1000);},test: function () {// 消息框停留5秒后消失this.toast('这是一个 Toast 消息！', 5);}}})</script>
</body>
</html>
效果如下
