vue实现超出字数中间用省略号显示

思路：用filters
直接上代码
html

 <div class="deleteBox">
          <p>历史记录 <van-icon name="delete-o" @click="deleteFn" class="delete" size="18"/></p>
          <em v-if="historyList.length==0">暂无历史数据</em>
          <span
                  v-for="item in historyList"
                  :key="item.id"
                 @click="itemHistory(item.vocabulary)"
                 v-if="historyList.length>0&&item.vocabulary"
          >{{item.vocabulary | ellipsis}}</span>
        </div>

methods

  filters:{
    ellipsis(value){
      console.log(value);
      let len=value.length;
      if (!value) return ''
      if (value.length > 12) {
        return value.substring(0,5) + '...' +value.substring(len-5,len) //前5个和后五个，中间省略号
      }
      return value
    }
  },
 methods: {
    //历史记录数据
    getUserKeywordsList(){
      let params={
        pageNo:1,
        limit:10
      }
      getUserKeywords(params).then((res) => {
        if (res.status === 0) {
          this.historyList=res.data.resultData
            if(res.data.resultData.length==0){
                this.goSearchList() //跳转到搜索页面
            }
        } else {
            this.$toast(res.message);
        }
      }).catch((error) => {
           console.log('接口失败');
      });
    },
    //点击历史记录每个点击事件，值付给input
    itemHistory(vocabulary){
      this.searchKey=vocabulary
      this.goSearchList()//跳转搜索页面
    },
    //删除历史记录
    deleteFn(){
        Dialog.confirm({
            title: '提示',
            message: '确认删除全部历史搜索记录？',
        }).then(() => {
            getClearKeyWords().then((res) => {
                if (res.status === 0) {
                    this.historyList=[];
                    this.$toast('搜索历史记录清空' );
                } else {
                    this.$toast(res.message);
                }
            }).catch((error) => {
                console.log(error);
            });
        }).catch(() => {
            // on cancel
        });
    },
    // 跳转快搜结果页
    goSearchList() {
      if (this.searchKey && this.searchKey.length > 0) {
        this.$router.push({
          name: "searchList",
          params: {
            ytoSearchKey: this.searchKey,
            isSearch: true,
          },
        });
      }
    },
    //取消--返回主页
    cancel(){
      this.$router.go(-1)
      this.historyList=[];
    }
  },