更新记录

1.0.1（2025-07-01） 下载此版本

1

1.0.0（2024-11-05） 下载此版本

初版

平台兼容性

uni-app

其他

x-view-more 组件使用说明

简介

x-view-more 是一个用于处理长文本内容的 Vue 组件，支持文本展开/收起功能。当文本内容超过设定的行数时，会显示"展开"按钮，点击后可查看全部内容，并提供"收起"功能。

特性

• 📝 自动检测文本长度
• 🔄 支持展开/收起切换
• 🎨 可自定义样式（颜色、字体大小、行高等）
• 📱 响应式布局
• ⚙️ 灵活的配置选项

基础用法

<template>
  <x-view-more 
    :content="longText"
    :showRow="3"
  />
</template>

<script>

export default {
  data() {
    return {
      longText: '这里是一段很长的文本内容，当内容超过设定的行数时会自动显示展开按钮...'
    }
  }
}
</script>

属性配置

使用示例

基础示例

<x-view-more 
  content="这是一段测试文本，用于演示组件的基本功能。"
  :showRow="2"
/>

自定义样式

<x-view-more 
  :content="articleContent"
  color="#333"
  btnColor="#007aff"
  fontSize="16px"
  lineHeight="24px"
  :showRow="3"
  :customStyle="{ padding: '10px', backgroundColor: '#f5f5f5' }"
/>

动态内容

<template>
  <view>
    <x-view-more 
      :content="dynamicContent"
      :showRow="showLines"
      @expand="onExpand"
      @collapse="onCollapse"
    />

    <button @click="changeContent">更换内容</button>
    <button @click="changeShowLines">调整显示行数</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dynamicContent: '初始内容...',
      showLines: 2,
      contentList: [
        '这是第一段内容...',
        '这是第二段更长的内容，包含更多的文字信息...',
        '这是第三段非常长的内容，用于测试组件在不同内容长度下的表现...'
      ]
    }
  },
  methods: {
    changeContent() {
      const index = Math.floor(Math.random() * this.contentList.length)
      this.dynamicContent = this.contentList[index]
    },
    changeShowLines() {
      this.showLines = this.showLines === 2 ? 4 : 2
    },
    onExpand() {
      console.log('内容已展开')
    },
    onCollapse() {
      console.log('内容已收起')
    }
  }
}
</script>