vue插件开发

vue插件开发

1 插件概念

1.1 什么是插件

• 随着项目编写的进行，代码量越来越多，重复的内容随之增加，比如每个页面可能都会有提示框，同个项目中这些提示的样式都是统一的，那么我们没必要每个页面每个交互动作都写一个提示组件，我们可以创建一个通用的组件〈全局组件)，然后再每个需要的地方调用，减少代码量，简化代码结构，同时如果有新的需求需要修改也方便快捷，只需修改全局组件即可，一处修改，全局有效。
• 插件 (Plugin )是用来增强你的技术栈的功能模块，它的目标是Vue本身，简要的讲：插件是对 Vue的功能的增强和补充，比如:vue-router 就是一个插件，用来拓展Vue路由相关功能。
• 插件有两种创建方式：
  1. 一个是以组件的方式引入，通过父子组件传参改变状态调用；
  2. 一个是直接添加在挂载点里，通过方法改变状态调用。

1.2 组件和插件的区别

• 组件(Component)是用来构成你的App的业务模块，它的目标是App.vue。
• 插件(Plugin)是用来增强你的技术栈的功能模块，它的目标是Vue本身。简单来说，插件就是指对vue的功能的增强或补充。
• 比如说，让你在每个单页面的组件里，都可以调用某个方法，或者共享使用某个变量，或者在某个方法之前执行一段代码等，就可以写一个插件，在Vue原型上扩展方法，要实现这个需求绝对没法写成组件。

2 插件开发实战

两种方式实现message弹窗提示插件

2.1 创建组件文件

在plugins目录下新增message文件夹，然后在message目录下创建Message.vue文件，文件内容如下。

<template>
  <transition name="fade">
    <div class="message-box" v-if="showState">
      {{msg}}
    </div>
  </transition>
</template>

<script>
export default {
  // 说明：在实际开发中下面两种方式只能写其中一种
  // 第一种方式：通过接收父组件传来的参数改变数据状态
  props: {
    msg: {
      default: () => '这是一段信息',
      type: String
    },
    showState: {
      default: () => false,
      type: Boolean
    }
  },
  data () {
    // 第二种方式：通过方法调用改变该组件实例的数据状态
    return {
      msg: '这是一段信息',
      showState: false
    }
  }
}
</script>

<style lang="css" scoped>
  .message-box{
    position: fixed;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    height: 60px;
    width: 400px;
    line-height: 60px;
    border-radius: 5px;
    text-align: center;
    background-color: lightgreen;
    font-size: 14px;
    z-index: 999;
  }
  .fade-enter-active {
    transition: all .3s ease;
  }
  .fade-leave-active {
    transition: all .8s ease;
  }
  .fade-enter,
  .fade-leave-to{
    top: 0;
    opacity: 0;
  }
</style>

2.2 输出插件配置文件

在message目录下，创建index.js文件，内容如下。

import MessageComponent from './Message.vue'
const Message = {}
// 执行Vue.use(xxx)安装插件时，会自动执行xxx.install方法
// 并且会传入Vue构造方法为第一参数，第二个参数是一个可选的选项对象
Message.install = function(Vue, options) {
  // 第一种方式：父子组件传参方式改变数据状态
  // 全局注册该组件
  Vue.component('message',MessageComponent)

  // 第二种方式：方法调用改变数据状态
  // 生成一个Vue的子类，同时这个子类也就是组件
  const MessageConstructor = Vue.extend(MessageComponent)
  // 生成该子类的实例
  const instance = new MessageConstructor()
  // 将这个实例挂载在创建的div元素节点上
  // 并将这个div元素节点加入到全局挂载点内部
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)
  // 通过Vue的原型注册一个方法，让所有Vue所有实例都能共享这个方法
  Vue.prototype.$message = (msg, duration = 2000) =>{
    instance.msg = msg
    instance.showState = true
    const timer = setTimeout(() => {
      instance.showState = false
      clearTimeout(timer)
    },duration)
  }
}
export default Message

3 安装插件

//main.js
import Message from './plugins/message'
Vue.use(Message)

4 调用插件

<template>
    <!--第一种方式：父子组件传参方式改变数据状态-->
    <message msg="插件调用" :showState="true"></message>
</template>
export default {
	 mounted() {
        // 第二种方式：方法调用改变数据状态
        this.$message('插件调用', 3000)
	}
}