vue超出(规定字数)文本用省略号代替

最新推荐文章于 2024-07-09 22:17:47 发布

原创最新推荐文章于 2024-07-09 22:17:47 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在Vue项目中利用自定义过滤器实现对长标题的优雅截断，展示具体代码实例，包括HTML与JS部分，确保超过20字符的标题能以'...'形式显示。

加个fliters拦截器

html代码部分：加 {{item.title| ellipsis}}

 <div class="main_news_list d-flex flex-column my-3 px-3">
        <router-link
          to="`/news/${item._id}`"
          tag="div"
          class="py-1"
          v-for="item in items"
          :key="item._id"
        > {{item.title| ellipsis}}</router-link>

js代码部分

filters: {
    //超过20位显示 ...
    ellipsis: function(value) {
      if (!value) return "";
      if (value.length > 20) {
        return value.slice(0, 20) + "...";
      }
      return value;
    }
  },