This component is based on the text expansion and collapse component developed by vue 3.0, maybe the simplest and most understandable version of the code on github now, I hope it can help people who need it, if you think the writing is good, welcome to give me a star.

• Customizable button types
• Customizable text lines
• Easy to understand

Install

    npm install text-clamp-for-vue3

Full import

    import { createApp } from "vue";
    import TextClamp from 'text-clamp-for-vue3'
    import App from "./App.vue";
    const app = createApp(App);
    app.use(TextClamp).mount("#app");

Usage

    <TextClamp :text="str" :buttonType="'tight'" :maxLines="4">
        <template #textExpandButton="props">
          <div v-if="props.buttonType == 'oneLine'" :style="{
            textAlign: 'left',
            cursor: 'pointer',
            display: 'flex',
            justifyContent: 'flex-end'
          }">
            <button @click="props.toggle">
              {{ props.isExpanded ? "Collapse" : "Expand" }}
            </button>
          </div>
          <button @click="props.toggle" v-else>
            {{ props.isExpanded ? "Collapse" : "Expand" }}
          </button>
        </template>
      </TextClamp>

Properties

| text: string | Component content,it's Required. | | --------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | buttonType?: 'oneLine' | 'tight' | The unfold collapse button is divided into: 1. oneLine:Occupies a single line 2. tight: Closely adjacent to text | | maxLines?: number | Sets the number of rows displayed | | isExpanded?: boolean | Expanded state, true: expanded, false: collapsed |