概念
最近看了篇关于Vue插件的文章,为了避免忘记,打算写下来,以遍日后查阅。
我们引入全局变量的时候,可能需要一个一个的引入,而且在一个vue文件中引用的组件多了,会显得代码臃肿,所以才有了封装vue插件的需求。
插件组件模板
<template>
<transition name="fade">
<div class="toast" v-show="show">
{{message}}
</div>
</transition>
</template>
<script>
export default {
data () {
return {
show: false,
message: ''
};
}
}
</script>
<style lang="scss" scoped>
.toast {
position: fixed;
top: 40%;
left: 50%;
margin-left: -15vw;
padding: 2vw;
width: 30vw;
font-size: 4vw;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5vw;
z-index: 999;
}
.fade-enter-active,
.fade-leave-active {
transition: 0.3s ease-out;
}
.fade-enter {
opacity: 0;
transform: scale(1.2);
}
.fade-leave-to {
opacity: 0;
transform: scale(0.8);
}
</style>
这里面主要的内容只有两个,决定是否显示的show和显示什么内容的message,关键在于逻辑实现。
插件逻辑实现
import ToastComponent from './toast.vue'
const Toast = {}
// 注册toast
Toast.install = function (Vue) {
const ToastContstructor = Vue.extend(ToastComponent)
const instance = new ToastContstructor()
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
Vue.prototype.$toast = (msg, duration = 2000) => {
instance.message = msg
instance.show = true
setTimeout(() => {
instance.show = false
}, duration)
}
}
export default Toast
这里的逻辑大致可以分成这么几步:
创建一个空对象,这个对象就是日后要使用到的插件的名字。此外,这个对象中要有一个install的函数。
使用vue的extend方法创建一个插件的构造函数(可以看做创建了一个vue的子类),实例化该子类,之后的所有操作都可以通过这个子类完成。
之后再Vue的原型上添加一个共用的方法。
使用
之后再main.js中像我们之前一样使用普通的组件就行了
import Vue from 'vue'
import App from './App'
import router from './router'
import Toast from './components/toast'
Vue.use(Toast)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
全局调用
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="toast">显示toast弹出框</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
toast () {
this.$toast('测试')
}
}
}
</script>
附
该博客仅为记录开发中一些遇到的问题及解决方案,后续还会继续更新维护。