Element的組件拆解之Tooltip
element 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.js
import 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