Vue自定义全局弹出提示（Toast）组件 |
您所在的位置：网站首页 › 前端提示 › Vue自定义全局弹出提示（Toast）组件 |
Vue自定义全局弹出提示（Toast）组件
|
首先创建文件夹和文件
在index.vue里面写弹出的功能和样式 {{text}} export default { name: 'toast', data(){ return{ text:"" } } } .toast{ background-color: #C0C0C0; color: #FFFFFF; margin: auto auto; top:50%; left: 50%; padding:20px; position: absolute; border-radius: 10px; font-size: 20px; }然后在index.js中写核心的处理逻辑 import toast from './index.vue' export default { // 注册Toast install(Vue) { Vue.prototype.$Toast = (text, opts) => { // 设置默认参数，可设置多个 let defaultOpts = { duration: 2000 } opts = Object.assign(defaultOpts, opts); // 生成一个Vue的子类 let toastTpl = Vue.extend(toast); // 生成一个该子类的实例 let tpl = new toastTpl().$mount(); // 并将此div加入全局挂载点内部 document.body.appendChild(tpl.$el); // 修改提示语 tpl.text = text; // 定时消失 setTimeout(() => { document.body.removeChild(tpl.$el); }, opts.duration) } } }然后在main.js中注册组件
然后就可以在所有页面中通过 this.$Toast()来调用了
最终效果
|
【本文地址】
今日新闻 |
推荐新闻 |