最近在重构公司的项目，有些组件想要封装的更灵活，例如toast、loading、messageBox等弹窗组件，模仿了mint-ui封装此类组件的方式封装了自己的弹窗组件；
mint-UI主要使用了Vue.extend()方法，也就是预设了部分选项的Vue实例构造器，返回一个组件构造器；用来生成组件，可以在实例上扩展方法，从而使用更灵活；可以理解为当在模版中遇到该组件名称作为标签的自定义元素时，会自动调用这个实例构造器来生成组件实例，并挂载到指定元素上。
一、Vue.extend()简单的使用：
1、定义一个vue模版：
let tem ={
template:'{{firstName}} {{lastName}} aka {{alias}}',
data:function(){
return{
firstName:'Walter',
lastName:'White',
alias:'Heisenberg'
}
}
2 、调用；const TemConstructor = Vue.extend(tem)
const intance = new TemConstructor({el:"#app"}),生成一个实例，并且挂载在#app上
二、封装toast组件
首先按照普通写法定义一个vue组件模版，toast.vue,写法与普通组件写法相同；
const ToastConstructor = Vue.extend(toast) // toast就是vue模版
let toastTool = []
const getIntance = () => {// 通过构造器获取实例
if (toastTool.length > 0) {
const intance = toastTool[0]
return intance
}
return new ToastConstructor({
el: document.createElement('div')
})
}
const removeDom = (e) => {
if (e.target.parentNode) {
e.target.parentNode.removeChild(e.target)
}
}
ToastConstructor.prototype.close = function () {
this.visible = false
this.closed = true
this.$el.addEventListener('transitionend', removeDom) // 执行完毕之后删除dom
toastTool.push(this)
console.log(toastTool)
}
const Toast = (options = {}) => { // options是对应的props需要接收的传入的值
const intance = getIntance()
document.body.appendChild(intance.$el) // 将元素append到页面上
intance.message = typeof options !== 'object' ? options : options.message || '操作成功'
intance.duration = options.duration || 3000
intance.className = options.className || ''
intance.iconName = options.iconName || ''
intance.position = options.position || ''
intance.closed = false
intance.$el.removeEventListener('transitionend', removeDom)
clearTimeout(intance.timer)
Vue.nextTick(function () {
intance.visible = true
intance.duration && (intance.timer = setTimeout(function () {
if (intance.closed) {
return false
}
intance.close()
}, intance.duration))
})
return intance
}
export default Toast // 抛出toast函数，调用则显示弹窗，可以在option中设置在一定时间关闭弹窗，设置位置信息，传入icon
网友评论