更新记录

0.0.5(2024-10-04) 下载此版本

  • fix: vue2 跳转问题

0.0.3(2024-10-04) 下载此版本

  • fix: 修复uvue app image尺寸问题

0.0.2(2024-10-03) 下载此版本

  • fix: 修复vue2 class
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.26 app-vue app-uvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

lime-cell 单元格

  • 单元格用于各个类别行的信息展示,列表项,可组成列表。兼容uniapp/uniappx(h5,ios,安卓)
  • 插件依赖lime-sharedlime-iconlime-style、初版可能有BUG

安装

插件市场导入即可,第一次导入可能还需要重新编译

代码演示

基础用法

Cell 可以单独使用,也可以与 CellGroup 搭配使用,CellGroup 可以为 Cell 提供上下外边框。

<l-cell-group>
  <l-cell title="单行标题" :arrow="true"></l-cell>
  <l-cell title="单行标题" :arrow="true" :hover="true" :required="true" />
</l-cell-group>

卡片风格

通过 CellGroupinset 属性,可以将单元格转换为圆角卡片风格。

<l-cell-group inset>
  <l-cell title="单行标题" note="辅助信息" :arrow="true" />
  <l-cell title="单行标题" description="一段很长很长的内容文字" :arrow="true"></l-cell>
</l-cell-group>

单元格大小

通过 size 属性可以控制单元格的大小。

<van-cell title="单行标题" note="辅助信息" size="small" />
<van-cell title="单行标题" note="辅助信息" size="small" description="一段很长很长的内容文字" />

图标图片

通过 icon 属性在标题左侧展示图标,通过 image 属性在标题左侧展示图片。

<l-cell title="单行标题" icon="animation-1" :arrow="true" :hover="true" />
<l-cell title="多行带头像" description="一段很长很长的内容文字" :arrow="true">
    <template #icon>
        <l-avatar shape="circle" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
    </template>
</l-cell>
<l-cell title="多行带图片" description="一段很长很长的内容文字" image="https://tdesign.gtimg.com/mobile/demos/avatar2.png" />

展示箭头

设置 arrow 属性后会在单元格右侧显示箭头。

<van-cell title="单元格" :arrow="true" />

页面导航

可以通过 url 属性进行 URL 跳转。通过openType设置跳转类型

<l-cell title="URL 跳转" :arrow="true" url="/pages/test/index" />

分组标题

通过 CellGrouptitle 属性可以指定分组标题。

<l-cell-group title="分组1">
  <l-cell title="单行标题" />
</l-cell-group>
<l-cell-group title="分组2">
  <l-cell title="单行标题" />
</l-cell-group>

使用插槽

如以上用法不能满足你的需求,可以使用插槽来自定义内容。

<l-cell value="内容" :arrow="true">
  <!-- 使用 title 插槽来自定义标题 -->
  <template #title>
    <text class="custom-title">单行标题</text>
    <l-tag type="primary">标签</l-tag>
  </template>
</l-cell>

<l-cell title="左侧图标">
  <!-- 使用 icon 插槽来自定义左侧图标 -->
  <template #icon>
    <l-icon name="search" />
  </template>
</l-cell>

<l-cell title="右侧图标">
  <!-- 使用 rightIcon 插槽来自定义右侧图标 -->
  <template #rightIcon>
    <l-icon name="search" />
  </template>
</l-cell>

<l-cell title="辅助信息">
  <!-- 使用 note 插槽来自定义右侧辅助信息 -->
  <template #note>
    <l-badge :content="20" />
  </template>
</l-cell>

<l-cell title="内容描述">
  <!-- 使用 description 插槽来自定义下方内容描述 -->
  <template #description>
    <text>多行高度不定,长文本自动换行,该选项的描述是一段很长的内容</text>
  </template>
</l-cell>

对齐方式

通过 align 可以设置内容的对齐方式,可选项:top/middle/bottom,默认是middle。

<l-cell align="bottom" title="单行标题" note="内容" description="一段很长很长的内容文字" />

查看示例

  • 导入后直接使用这个标签查看演示效果
 // 代码位于 uni_modules/lime-cell/compoents/lime-cell 
<lime-cell />

插件标签

  • 默认 l-cell 为 component
  • 默认 l-cell-group 为 component
  • 默认 lime-cell 为 demo

关于vue2的使用方式

  • 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
  • 关键代码是: 在main.js中 在vue2部分加上这一段即可.
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

CellGroup Props

参数 说明 类型 默认值
title 分组标题 string -
inset 是否展示为圆角卡片风格 boolean false

Cell Props

参数 说明 类型 默认值
title 左侧标题 string -
note 右侧内容 string -
description 标题下方的描述信息 string -
size 单元格大小,可选值为 small string -
icon 左侧图标名称,等同于 Icon 组件的 name 属性 string -
iconColor 左侧图标颜色 string -
iconSize 左侧图标尺寸 string -
rightIcon 右侧图标名称,等同于 Icon 组件的 name 属性 string -
rightIconColor 右侧图标颜色 string -
rightIconSize 右侧图标尺寸 string -
image 左侧图片链接 string -
url 点击后跳转的链接地址 string -
bordered 是否显示内边框 boolean true
required 是否显示表单必填星号 boolean false
arrow 是否展示右侧箭头 boolean false
hover 是否开启点击反馈 boolean false
required 是否显示表单必填星号 boolean false
openType 链接跳转类型,可选值:switchTab/reLaunch/redirectTo string navigateTo
align 内容的对齐方式,默认居中对齐。可选项:top/middle/bottom string middle
imageWidth 图片宽度 string -
imageHeight 图片高度 string -
bgColor 背景色 string -

Cell Events

事件名 说明 回调参数
click 点击单元格时触发 event: UniPointerEvent

Cell Slots

名称 说明
title 自定义左侧标题
note 自定义右侧内容
description 自定义标题下方的描述信息
icon 自定义左侧图标
rightIcon 自定义右侧图标

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式)。uvue app无效。

名称 默认值 描述
--l-cell-height: auto -
--l-cell-line-height: 1.56 -
--l-cell-vertical-padding: 32rpx -
--l-cell-horizontal-padding: 32rpx -
--l-cell-bg-color: white -
--l-cell-hover-color: --l-gray-1 -
--l-cell-border-color: --l-border-color-2 -
--l-cell-border-left-space: --l-cell-vertical-padding -
--l-cell-border-right-space: 0 -
--l-cell-description-color: --l-text-color-3 -
--l-cell-description-font-size: --l-font-size -
--l-cell-description-small-font-size: --l-font-size-sm -
--l-cell-description-line-height: --l-line-height -
--l-cell-note-color: --l-text-color-4 -
--l-cell-note-font-size: --l-font-size-md -
--l-cell-note-small-font-size: --l-font-size -
--l-cell-title-color: --l-text-color-1 -
--l-cell-title-font-size: --l-font-size-md -
--l-cell-title-small-font-size: --l-font-size -
--l-cell-left-icon-color: --l-primary-color -
--l-cell-left-icon-size: 46rpx -
--l-cell-left-small-icon-size: 42rpx -
--l-cell-right-icon-color: --l-text-color-4 -
--l-cell-right-icon-size: 44rpx -
--l-cell-required-color: --l-error-color-6 -
--l-cell-required-font-size: --l-font-size-md -
--l-cell-image-width: 96rpx -
--l-cell-image-height: 96rpx -

打赏

如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问