Привет, в этой очень короткой статье я покажу вам, как можно легко реализовать функцию «Читать дальше…» с помощью VueJs. Функция «Читать дальше» особенно полезна, когда у вас есть длинный блок текста, но вы не хотите отображать его сразу, например, как на сайте quora.

Не теряя времени, приступим.

В существующем приложении vue - вы можете создать новое с помощью vue create projectname или, если вы используете его непосредственно в браузере, включите скрипт vue

<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

Давайте создадим компонент, который будет содержать текст, для которого мы хотим реализовать подробнее.

// src/components/Readmore.vue
<template>
    <div>
        <span v-if="!readMoreActivated">{{longText.slice(0, 200)}}   </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: `Brown skin girl
Your skin just like pearls
The best thing in the world
Never trade you for anybody else
Singin' brown skin girl
Your skin just like pearls
The best thing in the world
I never trade you for anybody else, singin'
She said she really grew up poor like me
yeah
So while I may not pretty boy, your heart is amiss
Play it like a villain 'cause she caught in a wave
Tonight I am walkin' away`,
    readMoreActivated: false
    }
},
methods: {
    activateReadMore(){
        this.readMoreActivated = true;
    },
}
}
</script>

В этом примере я использую отрывок из текста песни Brown Skin Girl.

В компоненте выше (Readmore.vue):

  • создать свойство данных readMoreActivated: false, которое будет служить переключателем для активации чтения.
  • создайте свойство данных longText, которое будет содержать текст, который мы хотим использовать в функции readmore
  • создать метод activateReadMore, единственная задача которого - включить свойство данных readMoreActivated
  • Затем, наконец, шаблон, который будет отображать текст предварительного просмотра и полный текст. В шаблоне мы сначала отобразим первые 200 символов текста, а затем отобразим весь текст после нажатия на «Читать дальше».
<span v-if="!readMoreActivated">{{longText.slice(0, 200)}}</span>
<a class="" v-if="!readMoreActivated" @click="activateReadMore" href="#">
read more...
</a>
<span v-if="readMoreActivated" v-html="longText"></span>

Теперь у нас должно получиться следующее:

и когда будет нажата ссылка подробнее…, у нас должно появиться следующее:

При этом вы сможете реализовать чтение для любого блока текста.

Вы можете найти полный демонстрационный код на github: https://github.com/sdkcodes/vue-readmore-demo