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