https://github.com/lvjiaxuan/vue-text-collapse

vue 2/3 component for text expansion and collapse. 文字展开/收起组件。
https://github.com/lvjiaxuan/vue-text-collapse

text-collapse vue vue-demi vue2 vue3

Last synced: 7 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/lvjiaxuan/vue-text-collapse
• Owner: lvjiaxuan
• License: mit
• Created: 2023-07-22T08:16:04.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-11T09:42:23.000Z (12 months ago)
• Last Synced: 2024-09-23T04:32:48.316Z (11 days ago)
• Topics: text-collapse, vue, vue-demi, vue2, vue3
• Language: TypeScript
• Homepage: https://lvjiaxuan.github.io/vue-text-collapse/
• Size: 373 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-text-collapse

[![](https://img.shields.io/npm/v/vue-text-collapse?color=a1b858&label=npm)](https://www.npmjs.com/package/vue-text-collapse)

![](https://img.shields.io/badge/supports-vue%202%2F3-brightgreen)

[![](https://img.shields.io/npm/dependency-version/vue-text-collapse/vue-demi)](https://github.com/vueuse/vue-demi)

[Vue3 Demo](https://lvjiaxuan.github.io/vue-text-collapse)

[Vue2 Demo](https://lvjiaxuan.github.io/vue-text-collapse/vue2)

## Install

```sh

pnpm i vue-text-collapse

```

## Props

```ts

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

```sh

pnpm i

pnpm p:i

```

2. Confirm `playgrounds/vue3/src/App.vue`

```xml

// For build

// import textCollapse from 'vue-text-collapse'

import textCollapse from './../../../src'

// ...

```

3. Run the dev script

```sh

pnpm dev

```

## Preview vue 2/3

- `pnpm preview:3`

- `pnpm preview:2`