封装自己的toast组件，使用vue.extend创建构造器和$mount

深碍√TFBOYSˉ_ 2022-09-16 05:56 84阅读 0赞

## 标题封装自己的toast组件，使用vue.extend创建构造器 ##

文档：[https://cn.vuejs.org/v2/api/index.html\#Vue-extend][https_cn.vuejs.org_v2_api_index.html_Vue-extend]

此种方式主要是封装一些特别常用的组件，而在使用的时候无需再使用组件的地方写入组件标签，通过调用js方法就可以使用，展示页面效果

普通方式：要使用一个组件需要 将 写在使用的地方  
vue构造器方式：通过js方法就能使用，不用写 标签

使用方法：

*  只提示文字
 *  设置回调及停留时间
    
     *  message: ‘提示信息’,
     *  onClose: ‘关闭时的回调’,
     *  duration: ‘停留时长’

toast样式  
![在这里插入图片描述][67c95fbaf8f94b22848d9df727cea4a9.png]

// 只提示文字
    Toast('hhh')
    // 设置停留时间及回调
    Toast({ 
     message: '哈哈哈哈哈哈哈哈哈哈',
      duration: 1000,
      onClose: () => { 
        console.log('close1关闭回调')
      }
    });

### component/Toast/main.vue ###

<template>
      <transition @after-leave="handleAfterLeave">
        <div v-show="visible" class="messaged-wrap" @mouseenter="clearTimer" @mouseleave="startTimer">
          <div>{
       { message || '提示' }}</div>
        </div>
      </transition>
    </template>
    
    <script> export default { name: 'Toast', data() { return { duration: 2000, visible: false, timer: null, } }, methods: { handleAfterLeave() { this.$destroy(true); this.$el.parentNode.removeChild(this.$el); }, fnClose() { if (this.onClose) this.onClose(this); this.clearTimer() this.visible = false; }, clearTimer() { clearTimeout(this.timer); this.timer = null; }, startTimer() { if (this.duration < 0) return; this.timer = setTimeout(() => { this.fnClose() }, this.duration) } }, mounted() { this.startTimer() } }; </script>
    
    <style lang="scss" scoped> .messaged-wrap { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 1002; & > div { border-radius: 4px; font-size: 20px; padding: 10px 20px; color: #fff8f8; background-color: rgba(0, 0, 0, .6); } } </style>

### component/Toast/index.js ###

import Vue from "vue";
    import Main from "./main.vue";
    // 创建构造器
    const toastConstructor = Vue.extend(Main);
    /** * @param { { * message: '提示信息', * onClose: '关闭时的回调', * duration: '停留时长', * allowShowSingle: '只允许显示一个提示' * }} options 参数 */
    const Toast = function (options) { 
      if (Vue.prototype.$isServer) return;
      // 如果只允许显示一个提示 && 已经有未关闭的提示 则不进行提示
      if (options.allowShowSingle && document.getElementsByClassName('messaged-wrap').length > 0) return;
      options = options || { };
      if (typeof options === 'string') { 
        options = { 
          message: options
        };
      }
      if (!options.message) return ;
      let instance = new toastConstructor({ 
        data: options
      })
      // 挂载
      instance.$mount();
      document.body.appendChild(instance.$el);
      // 显示
      instance.visible = true;
      return instance;
    }
    export default Toast

[https_cn.vuejs.org_v2_api_index.html_Vue-extend]: https://cn.vuejs.org/v2/api/index.html#Vue-extend
[67c95fbaf8f94b22848d9df727cea4a9.png]: /images/20220828/aa6dde77b5f44235add9f1ba66fa35c8.png