Element 的组件拆解之 Tooltipelement ui 的中的 toolpic 组件 在 packages/tooltip 目录下。
这个组件核心部分是
toolpic 分别涉略了。《main.js vue-popper.js popup.js vdom.js dom.js》js 文件
核心用到到 js 差不多就是 main.js，vue-popper.js
其他都是 element 封装好都调用都公共方法
vdom.js
是找到 this.$slots.default 中都 vode
因为 this.$slots.default 默认返回都是一个数组
dom.js
是添加样式，检测是否有这个样式，获取样式等一些方法，对 ie 上对兼容等 有兴趣可以看看
main.js：代码
//main.jsimport Popper from ‘element-ui/src/utils/vue-popper’;export default {
mixins: [Popper],
render (h) {
// 初始化 beforeCreate 中 vue 的 html
this.newVue.node = (
<div
ref=”popper”
onMouseenter={() => {
this.show()
}}
onMouseLeave={() => {
this.hide()
}}
v-show={this.showPopper}
>
{this.$slots.default}
</div>
)
// 抛出自定义内容做固定展示在 html 上
return this.$slots.default[0]
},
beforeCreate () {
// 创建一个新的 Vue 对象
this.newVue = new Vue({
data: {node: ”},
render(h){
return this.node
},
}).$mount()
},
mounted(){
this.referenceElm = this.$el;
this.referenceElm.addEventListener(‘mouseenter’,()=>{this.show()})
this.referenceElm.addEventListener(‘mouseleave’,()=>{this.hide()})
},
methods: {
show(){
console.log(‘ 经过啦 ’)
this.showPopper = true
},
hide() {
console.log(‘ 离开啦 ’)
this.showPopper = false
}
}
}
在生命周期 beforeCreate 中创建一个新对 vue 对象，
通过 render 函数初始化 HTML 然后 return 一个 对象
例如：
<el-tooltip class=”item” effect=”dark” content=”Top Left 提示文字 ” placement=”top-start”> <el-button> 上左 </el-button> </el-tooltip>render 中 return 的就是
<el-button> 上左 </el-button> 这快内容
vue-popper.js 代码：在这个文件的代码核心部分,elementUI 也是用 npm 库里面的 popper.js 去完成 官方 api 再此 popper.js 我这边已经黏贴了飞机票
简化后的 vue-popper.js。
import popperJs from ‘popper.js’;export default {
data() {
return {
showPopper: false
}
},
watch: {
showPopper(val) {
val ? this.createpopper() : this.destroyPopper();
}
},
methods: {
createpopper(){
document.body.appendChild(this.$refs.popper);
new popperJs(this.referenceElm,this.$refs.popper)
}
}
} 这是最简单调用方式实现了一个 toolpic
鼠标经过和离开会展示这个 toolpic
总结
1. 通过 main.js 中生成 HTML 并在 mounted 生命周期中添加各种鼠标事件，改变 showPopper 的值
2. 同时把当前对 this.$el 赋值给 this.referenceElm
3. 在 vue-popper.js 对 showPopper 的值进行监听，一旦 showPopper 的值为 true 时执行 this.createpopper()，反之则摧毁
4. 在 this.createpopper() 函数中 popper 组件需要 2 个参数然后把 this.$refs.popper 和 this.referenceElm 传过去就好了
PC: 原声组件对很多细节做了处理我只是简单对还原对组件功能，若想知细节请去官网下载 elementUI