更新记录

0.0.4（2023-06-30）

• chore: 文档增加关于vue2的使用方式

0.0.3（2023-05-12）

• chore: 更新文档

0.0.2（2023-05-12）

• fix: 修复在vue app 滚动条问题

平台兼容性

lime-text-ellipsis 文本省略

• 对长文本进行省略，支持展开/收起
• 基于uniapp vue3
• Q群 1169785031

安装

• 在市场导入插件即可在任意页面使用，无须再import

基础用法

默认展示 1 行，超过 1 行显示省略号。

<l-text-ellipsis content="很多时候，总以为可以一直拥有，拥有那些自己想要的快乐，用于那些自以为需要的一切，只是，却没发现，当心正开始从无到有慢慢接纳的时候。离失去也就不远了。" />

展开/收起

超过行数支持展开/收起。

<l-text-ellipsis content="很多时候，总以为可以一直拥有，拥有那些自己想要的快乐，用于那些自以为需要的一切，只是，却没发现，当心正开始从无到有慢慢接纳的时候。离失去也就不远了。" expand-text="展开" collapse-text="收起" />

自定义展示行数

通过设置 rows 限制展示行数。

<l-text-ellipsis
  rows="3"
  content="树叶，离开了树桠，不全是季节的无奈。换来了新生，何尝不是一种胸怀。花朵，离开了花枝，不全是规律的悲哀。化作了春泥，生命也许更为精彩。离开，或许不是离开，如果心中有爱。离开，或许不是离开，如果因为未来。"
  expand-text="展开"
  collapse-text="收起"
/>

自定义icon

<l-text-ellipsis
  rows="3"
  content="树叶，离开了树桠，不全是季节的无奈。换来了新生，何尝不是一种胸怀。花朵，离开了花枝，不全是规律的悲哀。化作了春泥，生命也许更为精彩。离开，或许不是离开，如果心中有爱。离开，或许不是离开，如果因为未来。"
  expand-text="展">
  <!-- 无法直接获取自定义icon， 故需要设置 expandText 占位  -->
  <template #icon={expanded}>
    <text class="icon" :class="expanded && 'show'">⮞</text>
  </template>
</l-text-ellipsis>

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-text-ellipsis/compoents/lime-text-ellipsis 
<lime-text-ellipsis />

插件标签

• 默认 l-text-ellipsis 为 component
• 默认 lime-text-ellipsis 为 demo

依赖

• 插件依赖 lime-shared ，会自动下载。依赖是按需的，并不会把lime-shared全部函数打包！

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可,官方是把它单独成了一个文件.

// main.js vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

另外插件也用到了TS，vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的compile-typescript目录

// \HBuilderX\plugins\compile-typescript
yarn add typescript -D
- or - 
npm install typescript -D

API

Props

Events

主题定制

样式变量

• 在nvue下不支持 组件提供了下列 CSS 变量，可用于自定义样式