element中利用tooltip实现文字超出框悬浮显示
之前遇到过这个需求，所以就把自己的成果和大家分享下成果^ ^
我是利用了element-ui里面的tooltip组件进行一个二次封装，大家可以直接粘贴复制查看效果。。。话不多说，直接上代码
{{content||'-'}}
export default {
name: 'textTooltip',
props: {
// 显示的文字内容
content: {
type: String,
default: () => {
return ''
}
},
// 外层框的样式，在传入的这个类名中设置文字显示的宽度
className: {
type: String,
default: () => {
return ''
}
},
// 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
refName: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
isShowTooltip: true
}
},
methods: {
onMouseOver(str) {
let parentWidth = this.$refs[str].parentNode.offsetWidth;
let contentWidth = this.$refs[str].offsetWidth;
// 判断是否开启tooltip功能
if (contentWidth>parentWidth) {
this.isShowTooltip = false;
} else {
this.isShowTooltip = true;
}
}
}
}
.over-flow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.wid190 {
width: 190px;
}
调用组件代码
给大家把效果图贴出来
作者：never mind
