TextClamp Component for Vue3.0

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