資訊專欄INFORMATION COLUMN
摘要：的組件拆解之的中的組件在目錄下。這個組件核心部分是分別涉略了。
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默認返回都是一個數(shù)組
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}
)
// 拋出自定義內(nèi)容做固定展示在html上
return this.$slots.default[0]
},
beforeCreate () {
// 創(chuàng)建一個新的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("經(jīng)過啦")
this.showPopper = true
},
hide() {
console.log("離開啦")
this.showPopper = false
}
}
}
在生命周期beforeCreate中創(chuàng)建一個新對vue對象，
通過render函數(shù)初始化HTML 然后 return 一個 對象
例如：
render中return的就是
這快內(nèi)容
vue-popper.js代碼： 在這個文件的代碼核心部分,elementUI也是用npm庫里面的popper.js去完成 官方api再此 popper.js 我這邊已經(jīng)黏貼了飛機票
簡化后的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)
}
}
}
這是最簡單調用方式實現(xiàn)了一個toolpic
鼠標經(jīng)過和離開會展示這個toolpic
總結
1.通過main.js中生成HTML并在mounted生命周期中添加各種鼠標事件，改變showPopper的值
2.同時把當前對this.$el賦值給this.referenceElm
3.在vue-popper.js對showPopper的值進行監(jiān)聽，一旦showPopper的值為true時執(zhí)行this.createpopper()，反之則摧毀
4.在this.createpopper()函數(shù)中popper組件需要2個參數(shù)然后把 this.$refs.popper和 this.referenceElm傳過去就好了
PC:原聲組件對很多細節(jié)做了處理我只是簡單對還原對組件功能，若想知細節(jié)請去官網(wǎng)下載elementUI
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/101332.html
摘要：的組件拆解之的中的組件在目錄下。這個組件核心部分是分別涉略了。 Element的組件拆解之Tooltipelement ui的中的 toolpic組件 在 packages/tooltip目錄下。 這個組件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分別涉略了?！秏ain.js vue...
摘要：的組件拆解之的中的組件在目錄下。這個組件核心部分是分別涉略了。 Element的組件拆解之Tooltipelement ui的中的 toolpic組件 在 packages/tooltip目錄下。 這個組件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分別涉略了?！秏ain.js vue...
摘要：比如我們對調與會怎樣我們得到了三個不同類目近個月的趨勢，之所以是折線圖，因為圖表的維度軸列是連續(xù)的。在正式介紹標記區(qū)域前，先理解一下為何會發(fā)生這種轉變表格類組件是雙維度組件，折線圖是單維度組件。 1. 引言 Tableau 探索式分析功能非常強大，各種功能組合似乎有著無限的可能性。 今天筆者會分析這種探索式模型解題思路，一起看看這種探索式分析功能是如何做到的。 2. 精讀 要掌握探索式...
摘要：組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進行定位?？梢杂脕磉M行一些復雜帶校驗的彈窗信息展示，也可以只用于簡單信息的展示?？梢酝ㄟ^屬性來顯示任意標題，通過屬性來修改顯示區(qū)域的寬度。 手把手教你擼個vue2.0彈窗組件 在開始之前需要了解一下開發(fā)vue插件的前置知識，推薦先看一下vue官網(wǎng)的插件介紹 預覽地址 http://haogewudi.me/k...
閱讀 994·2021-09-26 10:15
閱讀 2081·2021-09-24 10:37
閱讀 2587·2019-08-30 13:46
閱讀 2637·2019-08-30 11:16
閱讀 2426·2019-08-29 10:56
閱讀 2600·2019-08-26 12:24
閱讀 3484·2019-08-23 18:26
閱讀 2669·2019-08-23 15:43
