1.前言
今天,我们使用Vue.extend()编程式的写法来编写一个vue插件,本质是将插件实例挂载到Vue的原型上。然后,就像element-ui的toast组件
那样,使用this.$toast()
实例方法去调用插件。
2.Vue.extend()
使用Vue这个基础构造器,构造出一个“子类”,其实就是个构造函数,通过new运算符生成vue实例。具体见官方文档Vue-extend。
3.如何编程式使用组件呢
比如,我们要实现个弹窗功能。通过编程式导航,我们就不用在模板中写了,可以使用js直接编写唤出弹窗。首先,我们正常的编写弹窗组件。如下:
<template>
<div class="gulu-toast" :class="toastClasses">
<div class="toast" ref="toast">
<div class="message">
<slot v-if="!enableHtml"></slot>
<div v-else v-html="$slots.default[0]"></div>
</div>
<div class="line" ref="line"></div>
<span class="close" v-if="closeButton" @click="onClickClose">
{{closeButton.text}}
</span>
</div>
</div>
</template>
<script>
//构造组件的选项
export default {
name: 'Toast',
props: {
autoClose: {
type: [Boolean, Number],
default: 5,
validator (value) {
return value === false || typeof value === 'number';
}
},
closeButton: {
type: Object,
default () {
return {
text: '关闭', callback: undefined
}
}
},
enableHtml: {
type: Boolean,
default: false
},
position: {
type: String,
default: 'top',
validator (value) {
return ['top', 'bottom', 'middle'].indexOf(value) >= 0
}
}
},
mounted () {
// 这里是为了防止不断点击,出现多个弹窗
const toast = document.getElementsByClassName('gulu-toast')[0]
toast && document.body.removeChild(toast)
this.updateStyles()
this.execAutoClose()
},
computed: {
toastClasses () {
return {
[`position-${this.position}`]: true
}
}
},
methods: {
updateStyles () {
this.$nextTick(() => {
this.$refs.line.style.height =
`${this.$refs.toast.getBoundingClientRect().height}px`
})
},
execAutoClose () {
if (this.autoClose) {
setTimeout(() => {
this.close()
}, this.autoClose * 1000)
}
},
close () {
this.$el.remove()
this.$emit('close')
this.$destroy()
},
onClickClose () {
this.close()
if (this.closeButton && typeof this.closeButton.callback === 'function') {
this.closeButton.callback(this)//this === toast实例
}
}
}
}
</script>
接下来,就是Vue.extend()
出场了。
import Toast from './src/toast.vue';
Toast.install = function (Vue) {
// 其实就是全局挂载使用
Vue.prototype.$toast = function (text, props) {
const ToastMain = Vue.extend(Toast)
const instance = new ToastMain({
propsData: props // 这里必须是propsData
})
instance.$slots.default = [text] // 插槽内容
// instance.$mount().$el 该段代码意义为:
// 文档之外渲染,并且获取该实例的根DOM元素,将其插入到body元素中。
document.body.appendChild(instance.$mount().$el)
}
}
export default Toast
我们在main.js入口文件中,使用Vue.use()安装后,就可以在任何地方使用了~~。
4.具体使用
this.$toast("关闭吗?", {
closeButton: {
text: "关闭",
callback: () => {
console.log('已经关闭了');
},
},
autoClose: 12,
position: 'bottom'
});
5.总结
- 首先,Vue.extend 获得是一个构造函数,可以通过实例化生成一个 Vue 实例。
- 实例化时可以向这个实例传入参数,但是需要注意的是 props 的值需要通过 propsData 属性来传递。
- 还可以通过$slots来自定义插槽内容。