vue 超出限定字数显示...鼠标移入显示全称

1、效果

 

2、例：超出四个字显示...

需要设置的名称后面加入 ellipsis

<div class="image_text" :title="item.name">{{ item.name | ellipsis }}</div>

3、再使用过滤器filters处理

filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 4) {
        return value.slice(0,4) + '...'
      }
      return value
    }
  },

5、鼠标移入显示全部，使用 :title 属性

<div class="image_text" :title="item.name">{{ item.name | ellipsis }}</div>