- 實作效果
- 字數超出長度顯示省略號，使用CSS實作
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- 超出字數出現提示，我使用的是
element-ui的
el-tooltip實作的，添加一個mouseover方法，滑鼠放到文字上面，去判斷文字的長度，如果長度超過自己設定的長度，設定disabledTooltip=false
<el-tooltip :disabled="disabledTooltip" class="item" effect="dark" :content="node.label" placement="top">
<div ref="nodeLabel" @mouseover="nodeLabelover(node.label)" style="float: left;vertical-align: middle;width: 210px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
{{ node.label }}
</div>
</el-tooltip>
定義變數：
disabledTooltip: true,//是否顯示提示
js：
//如果文字過長出現提示
nodeLabelover(value){
this.disabledTooltip = value.length < 12
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/395374.html
標籤：其他