美文网首页
封装toast插件

封装toast插件

作者: 依然_8deb | 来源:发表于2021-04-14 17:11 被阅读0次

    toast.vue

    <template>
        <transition name="message">
            <div class="toastWrap" v-if="toastShow" v-html="toastVal"></div>
        </transition>
    </template>
    
    <script>
    export default {
        name: 'Toast'
    }
    </script>
    
    <style lang="less" scoped>
    .toastWrap{
      padding:.2rem;
      position: fixed;
      top: 50%;
      transform: translate(-50%,-50%);
      left: 50%;
      margin:0 auto;
      z-index: 9999;
      background: rgba(0,0,0,.7);
      color: #fff;
      border-radius: 0.1rem;
    }
    </style>
    

    toast.js

    import Toast from './toast.vue'
    let toastPlugin = {};
    toastPlugin.install = function (Vue) {
      let instance;
      // 在Vue的原型上扩展方法
      Vue.showToast = Vue.prototype.$showToast = function (toastVal, time = 1000) {
        // Vue构造器,创建一个“子类”
        const ToastConstructor = Vue.extend(Toast);
        // 判断当前实例是不是已经存在
        if (!instance) {
          // 实例化插件并挂在到某一个元素上
          instance = new ToastConstructor({
            el: document.createElement('div'),
            data () {
              return {
                toastVal: toastVal,
                toastShow: false
              }
            }
          });
          // 添加在body内
          document.body.appendChild(instance.$el);
        }
        if (instance.toastShow) return;
        instance.toastShow = true;
        instance.toastVal = toastVal;
        let timer = setTimeout(res => {
          clearTimeout(timer);
          instance.toastShow = false;
        }, time);
      };
    };
    export default toastPlugin
    

    **全局调用$toast方法就是触发了绑定在Vue原型上的showToast方法,
    首先在main.js中引入并使用插件

    import toastPlugin from './plugins/toast/toast'
    Vue.use(toastPlugin )
    

    vue文件中使用方法如下:

    this.$showToast('这是一个tast弹窗',2000)
    

    http.js中使用方法如下

    import Vue from 'vue'
    Vue.showToast('会话超时')
    

    相关文章

      网友评论

          本文标题:封装toast插件

          本文链接:https://www.haomeiwen.com/subject/buhllltx.html