Tooltip組件拆解

marser 發(fā)布于2019-08-02 14:10 / 1492人閱讀

摘要：的組件拆解之的中的組件在目錄下。這個(gè)組件核心部分是分別涉略了。

Element的組件拆解之Tooltip
element ui的中的 toolpic組件在 packages/tooltip目錄下。

這個(gè)組件核心部分是

toolpic 分別涉略了?！秏ain.js vue-popper.js popup.js vdom.js dom.js》js文件

核心用到到j(luò)s差不多就是main.js，vue-popper.js

其他都是element封裝好都調(diào)用都公共方法

vdom.js

是找到this.$slots.default中都vode

因?yàn)閠his.$slots.default默認(rèn)返回都是一個(gè)數(shù)組

dom.js

是添加樣式，檢測(cè)是否有這個(gè)樣式，獲取樣式等一些方法，對(duì)ie上對(duì)兼容等有興趣可以看看

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 = (
         {
                this.show()
            }}
            onMouseLeave={() => {
                this.hide()
            }}
            v-show={this.showPopper}
        >
            {this.$slots.default}
        
    )   
   // 拋出自定義內(nèi)容做固定展示在html上
    return this.$slots.default[0]
},
beforeCreate () {
    // 創(chuàng)建一個(gè)新的Vue對(duì)象
    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("經(jīng)過(guò)啦")
        this.showPopper = true
    },
    hide() {
        console.log("離開(kāi)啦")
        this.showPopper = false
    }
}

}

在生命周期beforeCreate中創(chuàng)建一個(gè)新對(duì)vue對(duì)象，

通過(guò)render函數(shù)初始化HTML 然后 return 一個(gè) 對(duì)象

例如：

上左

render中return的就是

上左
這快內(nèi)容

vue-popper.js代碼：在這個(gè)文件的代碼核心部分,elementUI也是用npm庫(kù)里面的popper.js去完成官方api再此 popper.js 我這邊已經(jīng)黏貼了飛機(jī)票

簡(jiǎn)化后的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)
    }
}

}
這是最簡(jiǎn)單調(diào)用方式實(shí)現(xiàn)了一個(gè)toolpic

鼠標(biāo)經(jīng)過(guò)和離開(kāi)會(huì)展示這個(gè)toolpic

總結(jié)

1.通過(guò)main.js中生成HTML并在mounted生命周期中添加各種鼠標(biāo)事件，改變showPopper的值

2.同時(shí)把當(dāng)前對(duì)this.$el賦值給this.referenceElm

3.在vue-popper.js對(duì)showPopper的值進(jìn)行監(jiān)聽(tīng)，一旦showPopper的值為true時(shí)執(zhí)行this.createpopper()，反之則摧毀

4.在this.createpopper()函數(shù)中popper組件需要2個(gè)參數(shù)然后把 this.$refs.popper和 this.referenceElm傳過(guò)去就好了

PC:原聲組件對(duì)很多細(xì)節(jié)做了處理我只是簡(jiǎn)單對(duì)還原對(duì)組件功能，若想知細(xì)節(jié)請(qǐng)去官網(wǎng)下載elementUI

GPU云服務(wù)器云服務(wù)器 Tooltip button tooltip highcharts tooltip Tooltip插件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53624.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

marser

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2983·2023-04-25 22:16
寶塔面板安裝獨(dú)角數(shù)卡2.x版本(dujiaoka)

閱讀 2186·2021-10-11 11:11
小程序開(kāi)發(fā)總結(jié)（一）

閱讀 3272·2019-08-29 13:26
前端JQ實(shí)現(xiàn)偽分頁(yè)

閱讀 616·2019-08-29 12:32
一道題看透函數(shù)柯里化

閱讀 3438·2019-08-26 11:49
利用VUE異步組件、動(dòng)態(tài)加載組件，實(shí)現(xiàn)自定義組件順序、動(dòng)態(tài)綁定傳入子組件的props、動(dòng)態(tài)綁定監(jiān)聽(tīng)子

閱讀 3027·2019-08-26 10:30
history和hash詳解

閱讀 1975·2019-08-23 17:59
結(jié)合源碼徹底理解 react事件機(jī)制原理 04 - 事件執(zhí)行

閱讀 1545·2019-08-23 17:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Tooltip組件拆解

相關(guān)文章