欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue自定义toast插件

程序员文章站 2024-03-05 11:06:54
...
  1. 创建配置文件index.js 和Toast.vue模板
import Toast from  './Toast'
const obj = {}
obj.install = function (Vue) {
    // console.log('执行toast函数',Vue);
    // Vue.prototype.$toast = 对象    将$toast 加入到vue原型中
    //1.创建组件构造器
    const toastContrustor = Vue.extend(Toast)   //将toast组件添加到构造器中
    //2.new的方式,根据创建的构造器,创建一个组件对象
    const toast = new toastContrustor()
    //3.将组件对象手动挂载到某个元素中  $mount  挂载
    toast.$mount(document.createElement('div'))
    //4.toast.$el就是对应的div  将 div添加到body中
    document.body.appendChild(toast.$el)
    Vue.prototype.$toast = toast
}
export default obj
<template>
   <div class="toast" v-show="isShow">
       {{message}}
   </div>
</template>

<script>
export default {
   data() {
       return {
           isShow:false,
           message:''
       }
   },
   methods:{
       show(message,duration) {
           this.message = message;
           this.isShow = true;
            setTimeout(() => {
                this.isShow = false;
                this.message = ''
            },duration)
       }
   }
}
</script>

<style  scoped>
    .toast{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 15px 25px;
        color: #fff;
        background: rgba(0, 0, 0, .7);
        z-index: 999;
        border-radius: 10px;
        text-align: center;
    }
    
</style>>

</style>
  1. 引入到Main.js注册
//自定义toast插件
import toast from 'common/toast'
Vue.use(toast)

  1. 调用安装的插件
this.$toast.show(res, 1000)
相关标签: vue.js