Skip to content

vue 2/3 component for text expansion and collapse. 文字展开/收起组件。

License

Notifications You must be signed in to change notification settings

lvjiaxuan/vue-text-collapse

Repository files navigation

vue-text-collapse

Vue3 Demo

Vue2 Demo

Install

pnpm i vue-text-collapse

Props

props: {
  text: {
    // The shown content.
    type: String,
    required: true,
  },

  collapseLines: {
    // The lines shown when it is collapsed.
    type: [ String, Number ],
    default: 2,
  },

  width: {
    type: String,
    default: '200px',
  },

  uniqueKey: {
    // Used for the `id` attribute when it is rendered by `v-for`.
    type: [ String, Number ],
    require: false,
  },

  expandText: {
    type: String,
    default: 'Expand',
  },

  collapseText: {
    type: String,
    default: 'Collapse',
  },
},

Development

  1. Install
pnpm i
pnpm p:i
  1. Confirm playgrounds/vue3/src/App.vue
<script setup lang="ts">
// For build
// import textCollapse from 'vue-text-collapse'
import textCollapse from './../../../src'
// ...
  1. Run the dev script
pnpm dev

Preview vue 2/3

  • pnpm preview:3
  • pnpm preview:2