如果字符超过 Vue.js 中的限制，则仅显示名称的一部分

Question

我正在尝试在用户登录后显示一条消息。

如果字符数超过8个，如何只显示名称的前8个字符后跟“..”？ （例如：蒙娜丽莎..）

new Vue({
    el: '#app',
    data: {
        username: 'AVERYLONGGGNAMMEEE'
    }
});

这是我的jsfiddle demo

Answer 1

这是我的答案：ANSWER-DEMO

<div id="app">
  <div v-if="username.length<8">Welcome, {{ username }}</div>
  <div v-else>Welcome, {{ username.substring(0,8)+".." }}</div>
</div>

Answer 2

更新 VUE 3

过滤器已从 Vue 3 中移除。

对于 Vue3，如果您希望能够在多个组件中使用一个函数，则必须使用 globalProperties。

app.config.globalProperties.$filters = {
  str_limit(value, size) {
    if (!value) return '';
    value = value.toString();

    if (value.length <= size) {
      return value;
    }
    return value.substr(0, size) + '...';
  }
}

像这样使用它：

{{ $filters.str_limit(8) }}

VUE 2

您也可以注册filter。

您可以在项目中简单地重复使用该功能。

Vue.filter('str_limit', function (value, size) {
  if (!value) return '';
  value = value.toString();

  if (value.length <= size) {
    return value;
  }
  return value.substr(0, size) + '...';
});

像这样使用它：

<div id="app">
  <div>Welcome, {{ username | str_limit(8) }}</div>
</div>

Answer 3

您可以通过使用计算属性来做到这一点。

new Vue({
 el: '#app',
 data: {
  username: 'AVERYLONGGGNAMMEEE'
 },

 computed: {
   strippedUsername: function(){
      if(this.username.length > 5) {
         return this.username.slice(0,4);
      }
      return this.username;
   }
}


});

Answer 4

您需要一个计算属性来检查字符串是否大于 8 个字符并进行修改并在模板中使用该计算属性。

new Vue({
  el: '#app',
  data: {
    username: 'AVERYLONGGGNAMMEEE'
  },
  computed: {
    usernameLimited(){
      if ( this.username.length > 8 ) {
        return this.username.substring(0,8) + '...'
      } else {
        return this.username
      }
    }
  }
})

Answer 5

如果你可以用 css 做到这一点，你应该这样做。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Answer 6

您可以使用substr()方法获取部分名称：

var namePart = this.username.substr(0, 8) + '..';

或者您可以使用 CSS overflow: hidden; 和 text-overflow: ellipsis; 属性：demo。

Answer 7

提供/注入 (Vue3)

在这个解决方案中，我使用了上面介绍的 str_limit 函数，但我决定使用 Provide / Inject API 将它“提供”给我的组件。

主要想法是有一个单独的文件，可以在其中定义我的所有可注入辅助函数。

我首先创建了一个与 ma​​in.js 相同级别的“providers”文件夹，并将以下 index.js 放入其中。这个想法是有一个专门的地方来定义我所有的辅助函数。

providers/index.js

const providers={
    strLimit: (value, size) => {
      
        if (!value) return '';
        value = value.toString();

        if (value.length <= size) {
            return value;
        }
        return value.substr(0, size) + '...';
    }
}

export default providers;

在这个简化的 App.vue 中，我将 providers/index.js 中定义的提供方法导入到应用程序中：

App.vue

 import providers from "./providers";

    export default {
      name:"App",
      data(){
        return {
        }
      },
      provide:providers
    }

在我的 main.js 中，我创建了 vue 应用，传递上面显示的 App.vue 并挂载它：

ma​​in.js

import { createApp } from 'vue'
import App from "./App";

const app = createApp(App)
 app.mount('#app');
    app.config.errorHandler = (err) => {
       console.log(err);
    }

现在在我的组件中注入 strLimit 方法：

component.vue

<template>
<h1>{{clip(title,20)}}</h1>

</template>
<script>

export default {
  name: "myComponent",
  inject:['strLimit'],
  data(){
    return {
      title:"This is a very long title, which should be clipped at around 20 characters"
    }
  },
  methods:{
    clip(text, length){
      return this.strLimit(text, length);
    }
  }
}
</script>

Answer 8

这样想它可以处理一条线。并检查空值以避免 '[Vue warn]: Error in render: “TypeError: Cannot read property 'length' of null” with .substring()'

{{ username && username.length < 8 ? username : username.substring(0,8)+".."  }}