@kiko-yd/vue-show-more v0.0.1-beta.2

Vue Show More

一个轻量级的 Vue 3 组件，用于处理多行文本的展开/收起功能。

特性

• 🎯 支持自定义展开行数
• 🎨 支持通过插槽自定义展开/收起按钮
• 📱 响应式设计，支持移动端
• ⚡ 零依赖，轻量级
• 💪 使用 Vue 3 + TypeScript 开发，提供完整类型支持
• 🎈 灵活的按钮位置：支持内联和底部两种样式

安装

npm install @kiko-yd/vue-show-more
# 或
yarn add @kiko-yd/vue-show-more

使用方法

基础用法

<template>
  <ShowMore
    :max-lines="3"
    expand-text="展开"
    collapse-text="收起"
    @expand="onExpand"
  >
    这是一段很长的文本...
  </ShowMore>
</template>

<script setup lang="ts">
import { ShowMore } from "vue-show-more";
</script>

内联按钮样式

<template>
  <ShowMore
    :max-lines="3"
    action-position="inline"
    expand-text="展开"
    collapse-text="收起"
    mask-background="#f5f5f5"
  >
    <p style="font-size: 18px">这是一段很长的文本...</p>
  </ShowMore>
</template>

自定义展开/收起按钮

<template>
  <ShowMore :max-lines="3">
    <div style="font-size: 16px">这是一段很长的文本...</div>
    <template #action="{ isExpanded }">
      <button class="custom-button">
        {{ isExpanded ? "收起" : "查看更多" }}
        <icon-arrow :direction="isExpanded ? 'up' : 'down'" />
      </button>
    </template>
  </ShowMore>
</template>

Props

插槽

default

默认插槽，用于传入需要展开/收起的内容。默认按钮会自动继承该内容的字体样式。

action

自定义展开/收起按钮的内容和样式

作用域参数

事件

License

MIT