element transfer 不使用render-content方法給每一行加title的一種思路

原文地址： http://www.javashuo.com/article/p-qrayinaw-kh.html

問題描述

最近在使用element-ui的el-transfer時候遇到一問題：
穿梭框一行顯示一條數據，可是有的數據比較長，一行顯示不下，那就要把超出的部分用...展現，鼠標放上去的時候展現完整內容。
通常的作法呢，就是經過css控制...顯示，同時元素的title屬性，這樣鼠標放上去的時候能夠懸浮展現完整數據。
放在el-transfer的場景下就是經過組件提供的render-content來自定義每行內容的渲染，給每行元素加一個title屬性。
可是呢，render-content的返回內容得是JSX語法。
官方文檔demo code是這麼寫的：

renderFunc(h, option) {
    return <span>{ option.key } - { option.label }</span>;
}

還有一些註釋：

注意：因爲 jsfiddle 不支持 JSX 語法，因此使用 render-content 自定義數據項的例子在 jsfiddle 中沒法運行。可是在實際的項目中，只要正確地配置了相關依賴，就能夠正常運行。

簡單說就是要用render-content這個方法須要額外安裝一些依賴。我丟，爲了這麼個小玩意兒我還要裝一些依賴！不能忍，不能裝，必定要想辦法解決。因而我開始琢磨解決方法。

嘗試方法

css方案

一開始我想用css來解決。利用:hover、:after或者:before、content、attr()這些東西來本身實現一個title懸浮效果。可是翻遍了各類文檔沒找到怎麼經過atrr()來獲取元素文本值。而後這個方案就進行不下去了，只能換方法。

js方案

從js層面看，其實這個問題的核心就是給元素設置title屬性嘛，我手動給他加一個不就完了。個人作法是這樣的：經過監聽元素的onmouseover事件，當鼠標移動到元素上面時，獲取元素的文本值設置給元素的title屬性。
示例代碼以下：

<el-transfer @mouseover.native="addTitle"></el-transfer>

addTitle (e) {
    // 手動給鼠標滑過的元素加一個title
    let target_el = e.target;
    if (target_el.title) return;
    if (/*知足必定條件時候*/) {
        target_el.title = target_el.innerText;
    }
}

這樣這個問題就解決了。

小思考

作完這個東西，我有了一點小思考。
在咱們使用框架的時候，思惟有時候很容易被框架綁架，反而忘記了一些原生的東西，而這些原生的東西有時候解決起來問題反卻是更簡單、更直接。因此，雖然咱們在使用框架作東西，可是解決問題的時候不要侷限在框架內，有時候不妨跳出框架看看有沒有更直接、更簡單的方法。