对v-html的文字做超出显示省略号

需求说明:使用v-html展示的效果为有格式的样式,需要做成不换行并超出显示...,结果如下图:

 html代码:

<p v-html="$options.filters.ellipsis(item.title)"></p>

js代码:

filters: {
    //当渲染的文字超出9字后显示省略号
    ellipsis(value) {
      value = value.replace(/<.*?>/ig,"")       //把v-html的格式标签替换掉
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }else{
        return value
      }
      ;
    }
  },

 

posted @ 2021-04-15 09:40  小那  阅读(1977)  评论(0编辑  收藏  举报