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的htmlthis.newVue.node = (<divref="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}} } 復制代碼

main.js進行了簡化

在生命周期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再此 我這邊已經黏貼了飛機票

簡化后的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傳過去就好了

PS:只是簡單還原了這個功能，具體細節麻煩請下載elementUI

轉載于:https://juejin.im/post/5c480d43e51d4551e9610111

總結

以上是生活随笔為你收集整理的ElementUI的组件拆解之Tooltip的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。