摘要:難道是因?yàn)檫@個組件自帶標(biāo)簽胡亂猜疑是解決不了問題的。為何稱之為勉強(qiáng)版,因?yàn)閺纳厦娴囊部闯鰜砹恕T倏磾?shù)組第二個值,這便是一個完整的示例了。也希望能更加努力的學(xué)習(xí)和進(jìn)步,更深的理解前端這門藝術(shù)
項(xiàng)目使用ElementUI,挺好用的,頁面中有些地方的幫助提示通過使用組件Tooltip和el-icon-question來展示,代碼如下:
本月累計(jì)收益
截圖如下:
另外也可以看看jsfiddle的demo
全站很多地方都有都需要這樣的幫助提示,其中有些需要在表格的表頭上添加,似乎有點(diǎn)難度。效果如下:
因?yàn)镋lementUI上面的文檔對這塊自定義表頭沒有什么參考的文檔,是否能夠?qū)崿F(xiàn)心里沒底,去仔細(xì)翻了文檔,發(fā)現(xiàn)有個renderHeader的函數(shù)可以實(shí)現(xiàn),一直以為Vue還算比較熟悉的我有點(diǎn)點(diǎn)懵,這是個啥???
renderHeader(函數(shù)渲染)在我不太多的Vue項(xiàng)目開發(fā)實(shí)踐中,很少用到,因此并不熟悉,先看看官方解釋:
Vue 推薦在絕大多數(shù)情況下使用 template 來創(chuàng)建你的 HTML。然而在一些場景中,你真的需要 JavaScript 的完全編程的能力,這就是 render 函數(shù),它比 template 更接近編譯器。
ElementUI中的renderHeader就是對列標(biāo)題Label區(qū)域渲染使用的Function,通過他實(shí)現(xiàn)自定義表頭label功能!
萬變不離其宗,這個ElementUI的解釋一看就像是這段官方示例:
// 官方示例部分 render: function (createElement) { return createElement("h1", this.blogTitle) }
而回頭再看看ElementUI的示例:Function(h, { column, $index })。耐心琢磨,結(jié)合createElement看看便粗略寫出來了一個勉強(qiáng)能用的:
renderHeader(h, { column, $index }) { return h( "el-tooltip", { props: { content: (function() { let label = column.label switch (label) { case "訪問數(shù)": return "網(wǎng)站頁面上獨(dú)立訪問應(yīng)用的人數(shù)(UV)" break case "提交數(shù)": return "網(wǎng)站頁面上訪客在應(yīng)用上完成提交的數(shù)量" break case "成交數(shù)": return "網(wǎng)站頁面上最終成功在應(yīng)用上完成提交的數(shù)量" break } })(), placement: "top" }, domProps: { innerHTML: column.label + "" } }, [h("span")] ) }, // ...
但是很奇怪的是,最后面我要加上這個[h("span")]才行(demo)。
這種寫法我還是參考element table 自定義表頭,但是假設(shè)我寫成[h("span", "test")]是無法展現(xiàn)出test的效果的(demo)。根據(jù)vue文檔中解釋的第三個參數(shù),這里最為一個數(shù)組,為何span成了el-tooltip的HTML標(biāo)簽,我還是不解。
之所以奇怪是因?yàn)榧僭O(shè)我將引入的組件換成el-button,見如下代碼:
renderHeader(h, { column, $index }) { return h( "el-button", { props: { content: (function() { let label = column.label })() }, domProps: { innerHTML: column.label + "" } } ) }, // ...
則不需要尾部那個[h("span")]。卻能呈現(xiàn)出button結(jié)合icon的正確效果(demo)。難道是因?yàn)檫@個組件自帶HTML標(biāo)簽?胡亂猜疑是解決不了問題的。幾番嘗試,還是沒能達(dá)到預(yù)期交互效果。不過進(jìn)度問題,暫時只能使用這個勉強(qiáng)版本。
為何稱之為勉強(qiáng)版,因?yàn)閺纳厦娴膁emo也看出來了。這個提示交互和我文章之前寫的交互是有區(qū)別的,正確交互是:光標(biāo)移入問號的圖標(biāo)上才會展示提示框,雖然目前勉強(qiáng)版影響不大,卻一直在心中如一個疙瘩。于是過了一周,決定抽空把這個問題處理好,就有了新的寫法。
勉強(qiáng)版雖然沒有大礙,但是心中略有不爽。幾日后專門抽點(diǎn)時間多次閱讀各種實(shí)例,仔細(xì)閱讀文檔,反復(fù)嘗試各種寫法。終于寫出了一個相對良好的版本,直接先上代碼:
renderHeader(h, { column, $index }) { return [ column.label, h( "el-tooltip", { props: { content: (function() { let label = column.label switch (label) { case "訪問數(shù)": return "網(wǎng)站頁面上獨(dú)立訪問應(yīng)用的人數(shù)(UV)" break case "提交數(shù)": return "網(wǎng)站頁面上訪客在應(yīng)用上完成提交的數(shù)量" break case "成交數(shù)": return "網(wǎng)站頁面上最終成功在應(yīng)用上完成提交的數(shù)量" break } })(), placement: "top" } }, [ h("span", { class: { "el-icon-question": true } }) ] ) ] }
這個寫法很特別,return的是一個數(shù)組,這個寫法我又是哪里看到的呢?來自elementUI的table組件的表頭自定義:想把單位換行,有什么解決方法嗎?的采納回復(fù)中。乍一看有點(diǎn)亂七八糟,不過仔細(xì)想想,之前的提示在整個表頭都觸發(fā)了,現(xiàn)在這個數(shù)組大概起到了拼接作用,也就是將不需要出發(fā)的textNode部分提了出來。再看數(shù)組第二個值,這便是一個完整的示例了。最終效果可見demo。
其實(shí)心中還是有個疑問,為什么這里h(param1, param2, param3)的第三個參數(shù)用數(shù)組,數(shù)組中的第一個又是一個h(),并且這個對應(yīng)的就是組件el-tooltip的HTML標(biāo)簽,沒有它就無法正常渲染該組件。
寫到這里,其實(shí)問題已經(jīng)解決了,雖然符合需求的完美版本已經(jīng)上線,但是感覺個人對Vue或者說是Javascript更深層面的理解能力還不夠,也就對各種現(xiàn)象沒辦法做出很好的解釋。也希望能更加努力的學(xué)習(xí)和進(jìn)步,更深的理解前端這門藝術(shù):)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/97679.html
摘要:無效方案根據(jù)交易所小時成交量占比和實(shí)時價格加權(quán)計(jì)算得到渲染結(jié)果是一個包含了文字,同時有名為的,并無小圖標(biāo),后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性,即可實(shí)現(xiàn)固定表頭的表格,而不需要額外的代碼。例如: ... 這里文檔只給了一種固定高度250px的解決方案,實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素,超出滾動固定表頭的...
摘要:無效方案根據(jù)交易所小時成交量占比和實(shí)時價格加權(quán)計(jì)算得到渲染結(jié)果是一個包含了文字,同時有名為的,并無小圖標(biāo),后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性,即可實(shí)現(xiàn)固定表頭的表格,而不需要額外的代碼。例如: ... 這里文檔只給了一種固定高度250px的解決方案,實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素,超出滾動固定表頭的...
摘要:本文章從如下圖所示的最基本的入手,分析組件源代碼。本人已經(jīng)對組件原來的源碼進(jìn)行削減,源碼點(diǎn)擊這里下載。還有兩個重要的函數(shù)與。在組件的階段會調(diào)用更新,從而觸發(fā)重新渲染。例如當(dāng)組件加載后發(fā)送請求,待請求響應(yīng)賦值,重新渲染。 本文章從如下圖所示的最基本的table入手,分析table組件源代碼。本人已經(jīng)對table組件原來的源碼進(jìn)行削減,源碼點(diǎn)擊這里下載。本文只對重要的代碼片段進(jìn)行講解,推薦...
摘要:項(xiàng)目地址前言結(jié)合日常開發(fā),封裝常用功能,提高開發(fā)效率。通用顯示效果支持類型類型文本鏈接文檔圖片用法相關(guān)屬性屬性參數(shù)說明類型可選值默認(rèn)值動畫效果的列的配置對象,更多細(xì)節(jié)請參見列屬性。 項(xiàng)目地址:tbs-ve-template 前言 結(jié)合日常開發(fā),封裝常用功能,提高開發(fā)效率。讓程序猿兄弟姐妹們也有時間約約女票,逗逗男票,做做自己想做的事情,不要天天在辦公室造輪子! 1.通用Table 思路...
閱讀 1777·2021-09-28 09:43
閱讀 1125·2021-09-23 11:22
閱讀 2741·2021-09-14 18:05
閱讀 1833·2019-08-30 15:52
閱讀 2825·2019-08-30 10:55
閱讀 2020·2019-08-29 16:58
閱讀 1333·2019-08-29 16:37
閱讀 3046·2019-08-29 16:25