vue.js를 사용하여readmore와 관련된 실현 방법을 총결하였다.

1,readmore 디스플레이만

참조 주소:Quick Vue: How to implement ‘read more’ feature

효과도:

표시할 문자 수를 설정하고 나머지는 읽기 more...에서 설명한 대로 해당 매개변수의 값을 수정합니다.↓

Read more...전체 텍스트를 표시하려면 누르십시오.하지만 생략된 상태로 돌아갈 수는 없다.↓

코드

readmore1.vue

<template>    
<div>   
<span v-if="!readMoreActivated">{{longText.slice(0, 20)}}   </span>    
<a class="" v-if="!readMoreActivated" @click="activateReadMore" href="#"> Read more...</a>        
<span v-if="readMoreActivated" v-html="longText"></span>    
</div>
</template>

<script>
export default {    
  name: "Readmore",    
  data(){        
　 return {
　　longText: `これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。これはテスト。`,
    readMoreActivated: false    
　}
}
  ,methods: {    
   activateReadMore(){        
    this.readMoreActivated = true;    
   },
 }
}
</script>

2. 표시할 문자 수를 설정하면 나머지 부분은 "..."에서 표시

참조 주소:보이기 싫은 부분 생략.

효과도:

표시할 문자 수를 설정하면 나머지 부분은 "..."에서 설명한 대로 해당 매개변수의 값을 수정합니다.하지만...누르면 안 돼요. 그냥...태그 요소의 표시 속성을 수정합니다.
제한된 문자 수가 10시(value.slice(0,10)),↓

제한 문자 수가 100일 때(value.slice(0100), ↓

코드

readmore2.vue

<template>
    <div class="title">{{ name | ellipsis}}</div>
</template>

<script>
    export default {
        name: "demo",
        data(){
            return {
                name:'これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。これはテストです。',
            }
        },
        filters:{
            ellipsis(value){
                if (!value) return '';
                if (value.length > 10) {
                    return value.slice(0,10) + '...'
                }
                return value
            }
        }
    }
</script>

<style scoped>

</style>

3,readmore 디스플레이 +readless 디스플레이

참조 주소:github-read-more

효과도:

표시할 문자 수를 설정하면 나머지 부분은read more로 표시됩니다.↓

read more를 누르면 전문을 표시할 수 있습니다.↓ 다시readless를 누르면 생략문을 되돌려줍니다.↑

demo page

코드

 $npm install vue-read-more --save

main.js

 import ReadMore from 'vue-read-more';

 Vue.use(ReadMore)

readmore3.vue

<template>
  <div class="hello">
    <read-more more-str="read more" :text="msg" link="#" less-str="read less" :max-chars="100"></read-more>

</template>

<script>
export default {
  data () {
    return {
      msg: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ',
    }
  }
}
</script>