常用方法——5.vue超出限定字数显示...鼠标移入显示全称

🍈 作者主页： 💖仙女不下凡💖

🍈 前言介绍： 以下👇 内容都是我个人对于前端知识的总结，会定期更新欢迎持续关注！

🍈 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

🍈 推荐文章：css设置超过长度的以省略号显示

---

• 方法如下，但是该方法有弊端 汉字与数字的长度是不一致的，但是该方法却只是筛选了字数，如果想固定长度建议使用css方法。

<template>
  <div class="image_text" :title="鼠标移入显示全称">
    {{ 鼠标移入显示全称 | ellipsis }}
  </div>
</template>
<script>
export default {
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 4) {
        return value.slice(0,4) + '...'
      }
      return value
    }
  },
}
</script>