[JavaScript知识库]vue进阶：使用插件实现弹窗类组件

在之前的文章里，已经分析了怎么实现弹窗类组件，并且介绍了两种实现弹窗类组件的方式，分别是借助Vue构造函数和Vue的extend函数。想了解的可以先看我之前的文章：vue进阶：弹窗类组件实现方式

插件

插件是嘛?

插件通常用来为 Vue 添加全局功能。我们vue项目中最常用的插件就是vue-router。
vue插件和组件的诞生都是为了实现逻辑的复用，他们的本质都是对代码逻辑的封装，所以在一定程度上，组件可以封装成插件，插件也可以改写成组件。具体使用插件还是组件就要看项目中的实际使用场景了。Vue 插件和Vue组件只是在 Vue.js 中包装的两个概念。

除此之外，插件与组件的不同之处在于：插件是全局的，组件可以全局注册也可以局部注册。

插件的使用方式？

回顾下vue-router的使用方法：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '',
      component: ***
    }
  ]
})

通过全局方法 Vue.use() 使用插件。注意：它需要在你调用 new Vue() 启动应用之前完成。之后在其他 Vue 实例里面就可以通过 this.$xxx 来调用插件中提供的 API 了。

如果有需要传入一些参数：

Vue.use(MyPlugin, { someOption: true })

如何开发一个插件？

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

实现弹窗类组件

一般的UI组件库中，调用弹窗类组价一般这样调用：

this.$message();
this.$toast();

我们也采用添加实例方法的方式去完成这个弹窗类插件

Notice和create的实现方式文章——vue进阶：弹窗类组件实现方式中有完整的分析，这里只把代码贴出来：

// Notice组件

<template>
    <div v-if="isShow" class="modal">
        <div class="title">{{ title }}</div>
        <div class="content">{{ content }}</div>
    </div>
</template>

<script>
export default {
  name: 'Notice',
  props: {
    title: {
      type: String,
      default: '警告'
    },
    content: {
      type: String,
      default: '我是内容我是内容'
    }
  },
  data () {
    return {
      timerId: null,
      isShow: false
    }
  },
  methods: {
    show () {
      this.isShow = true
      setTimeout(() => {
        this.hide()
      }, 1500)
    },
    hide () {
      this.isShow = false
    }
  }
}
</script>

<style scoped>
.modal{
    position: relative;
    top: 50px;
    left: 50%;
    margin-left: -250px;
    width: 500px;
    border: 1px solid #f7f7f7;
    border-radius: 6px;
    /* box-shadow: 6px 6px 6px 1px rgba(255,0239,213,0.5); */
    padding: 10px;
    background-color: papayawhip;
    animation: disappear 2s ease-in-out;
}
.title{
    text-align: left;
    font-weight: 500;
    font-size: 14px;
}
.content {
    margin-bottom: 10px;
    font-size: 12px;
}

@keyframes disappear {
    0% {
        top: 60px;
        opacity: 1;
    }
    30% {
        top: 10px;
        opacity: 1;
    }
    96% {
      opacity: 0.20;
    }
    100% {
        top: 10px;
        opacity: 0;
    }
}
</style>

// create方法

function create (Component, props) {
  // 1. 构建Component的实例(类型是VueComponent的实例)
  const Ctor = Vue.extend(Component)
  const vm = new Ctor({propsData: props}).$mount()

  // 将真实节点挂载到body上
  document.body.appendChild(vm.$el)

  // 这里打印结果是行注释  <------> 这是因为vue内部使用了v-if,在show之前用注释做占位符占着,需要显示的时候才显示
  console.log(vm.$el)

  // // 获取组件实例
  // const comp = vm.$children[0]

  vm.remove = () => {
    document.body.remove(vm.$el)
    vm.$destroy()
  }

  return vm
}

// notice插件

import Notice from './Notice.vue'
import create from './create.js'
export default {
  // 暴露一个install方法,这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象(这里无)
  install (Vue) {
    Vue.prototype.$notice = function (options) {
      const comp = create(Notice, options)
      comp.show()
      return comp
    }
  }
}

别忘了在main.js中use一下：

Vue.use(create)

new Vue({
  render: h => h(App)
}).$mount('#app')

至此一个弹窗类插件实现啦~我们在使用的时候就可以这样使用：

this.$notice({
 	title: '测试标题',
  	content: '我是内容内容呀呀呀'
})

参考文档：vuejs.org。