"vue-read-more-esy" is a Vue.js package that offers a convenient way to display text content with a responsive design and customizable word count. It features a "read more" button that allows the user to expand and read the full text. This package is easy to use and provides a great way to manage long text content in a user-friendly manner.
Install with npm:
npm i vue-read-more-esyThis allows you to break text with common punctuations like space, dot ('.'), exclamation mark ('!'), and question mark ('?'). Breaking text with these characters creates a visually appealing and easy-to-read layout for displaying lengthy text content.
Add dependencies to your main.js:
You want to handle text character count based on screen size percentage:
import Vue from 'vue'
import ReadMorePre from 'vue-read-more-pre'
Vue.use(ReadMorePre)Add the global component to your App.vue:
<ReadMorePre longTextData="Lorem.ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus elit,....."><ReadMorePre/>You want to handle number of characters:
import Vue from 'vue'
import ReadMoreVal from 'vue-read-more-val'
Vue.use(ReadMoreVal)Add the global component to your App.vue:
<ReadMoreVal longTextData="Lorem.ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus elit,....."><ReadMorePre/>Use the component directly:
<!-- read-more.vue -->
<template>
<ReadMorePre longTextData="Lorem.ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus elit,....."><ReadMorePre/>
<!-- Or -->
<ReadMoreVal longTextData="Lorem.ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus elit,....."><ReadMoreVal/>
</template>
<script>
import { ReadMorePre } from 'vue-read-more-pre';
// Or
import { ReadMoreVal } from 'vue-read-more-val';
export default {
components: {
ReadMorePre,
// Or
ReadMoreVal.
},
};
</script>ReadMoreVal with Vue SFC Playground:
ReadMorePre with Vue SFC Playground:
Note that all props are optional.
Common props:
| Name | Type | Default | Description |
|---|---|---|---|
| longTextData | String | '' | Used to pass large amounts of text data (Required data) |
| readMore | String | Read more | But you can use any text that you prefer. |
| readLess | String | Read less | But you can use any text that you prefer. |
| mobMediaQuarrySize | Number | 576 | Package uses a media breakpoint query of 576px for mobile screen sizes. However, this value is customizable, and you can adjust it to meet your specific needs. |
| tabMediaQuarrySize | Number | 992 | Package uses a media breakpoint query of 992px for Tab screen sizes. However, this value is customizable, and you can adjust it to meet your specific needs. |
ReadMorePre props:
| Name | Type | Default | Description |
|---|---|---|---|
| mobileSizePre | Number | 0.5 | Allows you to specify the percentage of text that should appear on the mobile screen based on the screen size. By default, the value is set to 0.5, meaning that 50% of the text content will appear on the mobile screen. this value is customizable |
| tabSizePre | Number | 0.5 | Allows you to specify the percentage of text that should appear on the Tab screen based on the screen size. By default, the value is set to 0.5, meaning that 50% of the text content will appear on the Tab screen. this value is customizable |
| deskSizePre | Number | 0.5 | Allows you to specify the percentage of text that should appear on the Desktop screen based on the screen size. By default, the value is set to 0.5, meaning that 50% of the text content will appear on the Desktop screen. this value is customizable |
ReadMoreVal props:
| Name | Type | Default | Description |
|---|---|---|---|
| mobileSizeVal | Number | 100 | Maximum number of characters that should appear on the mobile screen. |
| tabSizeVal | Number | 200 | Maximum number of characters that should appear on the Tab screen. |
| deskSizeVal | Number | 300 | Maximum number of characters that should appear on the Desktop screen. |
<ReadMoreVal
longTextData="
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus elit, interdum ac sapien ut, dapibus fermentum purus. In sit amet finibus ante, eu facilisis nisi. Suspendisse elit orci, facilisis a suscipit lacinia, placerat vel est. Proin molestie semper dolor, eget volutpat massa rutrum vitae. Suspendisse finibus facilisis lectus ac commodo.
"
readMore="See more"
readLess="See less"
:mobMediaQuarrySize="575"
:tabMediaQuarrySize="767"
:mobileSizeVal="80"
:tabSizeVal="180"
:deskSizeVal="280"
>
</ReadMoreVal>
<!-- Or -->
<ReadMorePre
longTextData="
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus elit, interdum ac sapien ut, dapibus fermentum purus. In sit amet finibus ante, eu facilisis nisi. Suspendisse elit orci, facilisis a suscipit lacinia, placerat vel est. Proin molestie semper dolor, eget volutpat massa rutrum vitae. Suspendisse finibus facilisis lectus ac commodo.
"
readMore="See more"
readLess="See less"
:mobMediaQuarrySize="575"
:tabMediaQuarrySize="767"
:mobileSizePre="0.3"
:tabSizePre="0.5"
:deskSizePre="0.4"
>
</ReadMorePre>If you like vue-read-more-esy, please support it:
Thank you!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent