Vue.js의 한도를 초과하는 경우 이름의 일부만 표시

Vue.js의 한도를 초과하는 경우 이름의 일부만 표시

사용자가 로그인하면 메시지를 표시하려고 합니다.

문자수가 8자를 초과하는 경우 이름의 처음 8자 뒤에 ".."?(예: Monalisa..)만 표시하려면 어떻게 해야 합니까?

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

여기 제 jsfiddle 데모입니다.

여기 내 응답 바이올린: ANSWER-DEMO

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

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의 경우

필터를 등록할 수도 있습니다.

이 기능은 프로젝트에서 간단히 재사용할 수 있습니다.

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>

계산된 속성을 사용하여 이 작업을 수행할 수 있습니다.

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

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


});

문자열이 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
      }
    }
  }
})

css를 사용하여 이 작업을 수행할 수 있다면 수행해야 합니다.

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

subst() 메서드를 사용하여 이름의 일부를 가져올 수 있습니다.

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

또는 CSS를 사용할 수 있습니다.overflow: hidden;그리고.text-overflow: ellipsis;속성: 데모.

제공/주입(Vue3)

이 솔루션에서는 위에 제시된 str_limit 함수를 사용했지만 Provide/Inject API를 사용하여 컴포넌트에 제공하기로 결정했습니다.

주요 아이디어는 주입 가능한 모든 도우미 기능을 정의할 수 있는 별도의 파일을 갖는 것입니다.

처음에 main.js와 같은 레벨의 "providers" 폴더를 만들고 그 안에 다음 index.js를 배치했습니다.모든 도우미 기능을 정의하기 위한 전용 장소를 마련하는 것이 목적이었습니다.

프로바이더/index.displaces

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에 정의된 제공 메서드를 앱으로 Import합니다.

App.vue

 import providers from "./providers";

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

main.js에서 vue 앱을 만들고 위에 표시된 App.vue를 전달하여 마운트합니다.

main.discloss.main.discloss.

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

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

이제 컴포넌트 내부에 strLimit 메서드를 삽입합니다.

요소.표시하다

<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>

이렇게 하면 한 줄을 처리할 수 있습니다.'[Vue warn]을(를) 방지하기 위해 null 값을 확인하는 중: 렌더 오류: "TypeError: null의 속성 'length'를 읽을 수 없습니다. substring()이 있습니다.

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

언급URL : https://stackoverflow.com/questions/46639068/display-only-a-part-of-the-name-if-characters-exceed-a-limit-in-vue-js