Tooltip組件拆解

marser 發布于2019-08-02 14:10 / 1467人閱讀

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

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 = (
         {
                this.show()
            }}
            onMouseLeave={() => {
                this.hide()
            }}
            v-show={this.showPopper}
        >
            {this.$slots.default}
        
    )   
   // 拋出自定義內容做固定展示在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 一個對象

例如：

上左

render中return的就是

上左
這快內容

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

GPU云服務器云服務器 Tooltip button tooltip highcharts tooltip Tooltip插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53624.html

Tooltip組件拆解

摘要：的組件拆解之的中的組件在目錄下。這個組件核心部分是分別涉略了。 Element的組件拆解之Tooltipelement ui的中的 toolpic組件在 packages/tooltip目錄下。這個組件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分別涉略了。《main.js vue...

miya 2019-08-30 15:55 評論0 收藏0
Tooltip組件拆解

摘要：的組件拆解之的中的組件在目錄下。這個組件核心部分是分別涉略了。 Element的組件拆解之Tooltipelement ui的中的 toolpic組件在 packages/tooltip目錄下。這個組件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分別涉略了。《main.js vue...

khlbat 2019-08-23 14:54 評論0 收藏0
精讀《Tableau 探索式模型》

摘要：比如我們對調與會怎樣我們得到了三個不同類目近個月的趨勢，之所以是折線圖，因為圖表的維度軸列是連續的。在正式介紹標記區域前，先理解一下為何會發生這種轉變表格類組件是雙維度組件，折線圖是單維度組件。 1. 引言 Tableau 探索式分析功能非常強大，各種功能組合似乎有著無限的可能性。今天筆者會分析這種探索式模型解題思路，一起看看這種探索式分析功能是如何做到的。 2. 精讀要掌握探索式...

curried 2019-08-26 11:01 評論0 收藏0
手把手教你擼個vue2.0彈窗組件

摘要：組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進行定位。可以用來進行一些復雜帶校驗的彈窗信息展示，也可以只用于簡單信息的展示。可以通過屬性來顯示任意標題，通過屬性來修改顯示區域的寬度。手把手教你擼個vue2.0彈窗組件在開始之前需要了解一下開發vue插件的前置知識，推薦先看一下vue官網的插件介紹預覽地址 http://haogewudi.me/k...

mrli2016 2019-08-20 18:36 評論0 收藏0