自定义全局弹框插件

自定义全局插件

插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object，也可以是 function

一、开发vue全局插件的四种方式

1. Vue.prototype 方式

2. Vue.mixin 方式

3. Vue.filter 方式

4. Vue.directive 方式

export default {
    install(Vue, options) {
        Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如:  vue-custom-element            
            // 逻辑...        
        }
        Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch            
            bind (el, binding, vnode, oldVnode) {                
                // 逻辑...            
            }            
            ...        
        })        
        Vue.mixin({
            created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex                
                // 逻辑...            
            }            ...        
        })            
        Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现            
            // 逻辑...        
        }    
    }
}

二、插件的使用

在main.js里面引入并使用

通过import引入，Vue.use()来使用

三、例子(这里使用Vue.prototype 方式)

开发全局弹框插件，见下图：

步骤

1.在plugin文件夹下创建一个js文件，自定义为prompt.js

2.代码

export const wjPrompt = {
  install: (Vue) => {
    Vue.prototype.$prompt = (data) => {
      let s = {
        'success': '/img/wjElev/icon_succ.png',
        // 'fail': 'close-circle',
        'warn': '/img/wjElev/icon_warn.png',
        'loading': 'loading'
      }[data.type]
      let prompt = Vue.extend({
        props: ['duration'],
        data() {
          return {}
        },
        mounted() {
          let self = this;
          let time = (typeof this.duration == 'number') ? this.duration : 1000;
          setTimeout(() => {
            self.$destroy();
            self.$el.parentNode.removeChild(self.$el);
          }, time);
        },
        render(h) {
          return h(
            'div',
            {
              class: data.class ? data.class : 'prompt'
            },
            [
              /* h(
                'a-icon',
                {
                  class: 'messIcon',
                  attrs: {
                    type: s
                  },
                }
              ), */
              h(
                'img',
                {
                  class: 'promptIcon',
                  attrs: {
                    src: s,
                    style: data.type == 'loading' ? 'display:none;' : ''
                  },
                }
              ),
              h(
                'a-icon',
                {
                  class: 'promptIcon',
                  attrs: {
                    type: s,
                    style: data.type == 'loading' ? '' : 'display:none;'
                  },
                }
              ),
              h(
                'div',
                {
                  class: 'promptTit',
                  domProps: {
                    innerHTML: data.title
                  }
                },
              )
            ]
          )
        },
        methods: {
          destroy() {
            this.$destroy();
            this.$el.parentNode.removeChild(this.$el);
            console.log('------我执行了！！！')
          }
        }
      });
      const instance = new prompt({
        propsData: {
          duration: data.duration
        }
      });
      instance.vm = instance.$mount();
      document.body.appendChild(instance.vm.$el);
      return instance.vm
    }
  }
}

3.在main.js中全局引入并使用

引入：import { prompt } from "./plugins/prompt.js";

使用：Vue.use(prompt);

4.调用

this.$prompt({
        type: "loading",
        title: "c呃呃呃nmyx</br>哈哈哈哈哈哈哈哈哈",
        duration: 3000,
      });

属性：

vm.$el:获取Vue实例关联的DOM元素
vm.$data:获取Vue实例的data选项（对象）
vm.$options:获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods）
vm.$refs:获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）;