LimeUI+1.0.0

主题

LimeTextEllipsis 文本省略 ​

对长文本进行省略，支持展开/收起

安装 ​

在插件市场入口 导入插件即可在任意页面使用

文档 ​

text-ellipsis

代码演示 ​

基础用法 ​

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

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

展开/收起 ​

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

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

自定义展示行数 ​

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

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

自定义icon ​

uvue不支持

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

查看示例 ​

  • 导入后直接使用这个标签查看演示效果
html
 // 代码位于 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部分加上这一段即可
js
// main.js vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API ​

Props ​

参数说明类型默认值
rows展示的行数number1
content需要展示的文本string-
expand-text展开操作的文案string-
collapse-text收起操作的文案string-
dots省略号的文本内容string'...'
position省略位置，可选start,middle,endstring'end'

Events ​

事件说明回调参数
click点击展开/收起时触发event: MouseEvent

主题定制 ​

样式变量 ​

  • 在nvue下不支持 组件提供了下列 CSS 变量，可用于自定义样式
名称默认值描述
--l-text-ellipsis-action-color#1677ff-
--l-text-ellipsis-line-height1.6-

源代码 ​

组件源码