vue2实现最简toast

yxp_xa

已于 2024-05-04 20:56:46 修改

阅读量377

点赞数 4

分类专栏： HTML 文章标签： vue.js

于 2024-04-30 13:56:30 首次发布

本文链接：https://blog.youkuaiyun.com/yxp_xa/article/details/138338217

版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

最简toast

之前用过基于 jQuery 的无阻塞式 toast，也用过 bootstrap 框架的模式提示框，还用过基于 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>