vue管理系統（element-admin）在render函數中使用指令

問題描述

需求：table列表中文字溢出隱藏，並且隱藏的文字要使用title提示。

問題分析

• 需要一個title提示的指令或者方法
• 在table列表的數據中使用這個指令或方法

問題解決

• 寫了一個全局指令, 如果文字溢出了就提示title，如果文字沒有溢出就不顯示title。

// 溢出隱藏顯示title
  Vue.directive('title', {
    inserted: function (el, binding) {
      let padding = binding.value || 24
      el.addEventListener('mouseenter', (evt) => {
        let target = evt.target
        const { offsetWidth, title } = target // 目標元素寬
        let clientWidth = 10000
        if (evt.fromElement) {
          clientWidth = evt.fromElement.clientWidth - padding // 父元素寬
        }
        target.title = target.innerText
        if (offsetWidth < clientWidth) target.title = ""
      })
    }
  })

• 在table中使用這個指令（table沒有封裝）

<!-- v-title="50" 如果table的cellpadding過大可以給title綁定一個值來實現溢出提示效果 -->
<el-table-column label="名稱" prop="name">
     <template slot-scope="{ row }">
        <span v-title>{{ row.name }}</span>
     </template>
</el-table-column>

• 在table中使用這個指令（table封裝成組件）

// 注意在render一個span時，添加一個directives對象，其中的name就是全局注冊的 title 指令。
return h('span', {directives: [{name:'title'}]}, name)