Vue.directive自定义指令
Vue.directive 自定义指令 el-tooptip 提示框
该指令主要实现 el-tooptip
提示框 自适应内容宽度是否溢出父元素
, 且只有在当前元素宽度溢出父元素的情况下才回显示 el-tooltip
- 安装对应的vue项目依赖
- 安装element-ui 中的 Tooptip依赖;
具体代码
import Vue from 'vue'
import { getStyle } from 'element-ui/src/utils/dom'
/**
* 当text没有被折叠时或溢出父元素内容时,不显示tooltip
*/
const OurAutoTooltips = {
inserted: function (el, binding, vnode) {
el.addEventListener('mouseenter', function (e) {
const defalutSilent = !!Vue.config.silent
Vue.config.silent = true // 取消 Vue 所有的日志与警告
vnode.componentInstance.disabled = true // 禁用 el-tooltip
const range = document.createRange() // 创建 Range
range.setStart(el, 0) // 设置 Range 起点
range.setEnd(el, el.childNodes.length) // 设置 Range 终点
const rangeWidth = Math.round(range.getBoundingClientRect().width) // 获取当前元素相对于 浏览器视窗(可见区域) 的位置信息
// 获取当前 el-tooltip 的 x 轴 padding 值
const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0)
// 判断 Range 宽度 + 获取当前 el-tooltip 的 x 轴 padding 值 是否大于 el-tooltip 的 offsetWidth
if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
vnode.componentInstance.disabled = false // 启用 el-tooltip
}
Vue.config.silent = defalutSilent // 启用 Vue 所有的日志与警告
})
}
}
export default { name: 'our-tooltip', optionObj: OurAutoTooltips } // name: 指令名称 optionObj: 指令配置对象
- 批量注册自定义指令
// 批量注册自定义指令
const Directives = require.context('./', true, /\.js$/) // 获取当前路径下的所有 js 文件
export default {
install(app) {
Directives.keys().forEach(item => {
const DirectiveObj = Directives(item).default // 获取 js 文件默认导出项
app.directive(DirectiveObj.name, DirectiveObj.optionObj) // app.directive('自定义指令名称', '配置对象')
})
}
}
- 在main.js中注册指令
import GolbalDirectives from '@/directives/index.js' // 全局自定义指令
Vue.use(GolbalDirectives )
- 使用案例
<el-tooltip v-our-tooltip effect="dark" :content="row.remark" placement="top">
<div class="content single-line-ellipsis">{{ row.remark }}</div>
</el-tooltip>