&..._vue判断文本是否溢出">
当前位置:   article > 正文

vue判断文字是否溢出,溢出显示el-tooltip_vue判断文本是否溢出

vue判断文本是否溢出

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。

  1. <el-tooltip :content="item.name" placement="bottom" effect="light" :disabled="!isShowTooltip">
  2. <span class="member-label member-span text-hidden" v-if="edited"
  3. @mouseenter="visibilityChange($event)">{{ item.name }}</span>
  4. </el-tooltip>
  1. export default{
  2. data(){
  3. return{
  4. isShowTooltip:false,
  5. }
  6. },
  7. methods: {
  8. visibilityChange(event) {
  9. const ev = event.target;
  10. const ev_weight = ev.scrollWidth; // 文本的实际宽度 scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
  11. const content_weight = ev.clientWidth;// 文本的可视宽度 clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
  12. // const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
  13. if (ev_weight > content_weight) {
  14. // 实际宽度 > 可视宽度 文字溢出
  15. this.isShowTooltip = true;
  16. } else {
  17. // 否则为不溢出
  18. this.isShowTooltip = false;
  19. }
  20. },
  21. }
  22. }
  1. .text-hidden{
  2. overflow: hidden;
  3. white-space: nowrap;
  4. text-overflow:ellipsis;
  5. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/91840
推荐阅读
  

闽ICP备14008679号