更新记录

1.0.3（2024-06-21）

更新组件依赖

1.0.2（2024-06-21）

适配r-config-provider

1.0.1（2024-06-20）

修改文档

查看更多

平台兼容性

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

r-cell 单元格

单元格为列表中的单个展示项。

示例

//宽度跟随外层盒子
<r-cell-group>
  <r-cell title="单元格" value="内容" />
  <r-cell title="单元格" value="内容" label="描述信息" />
</r-cell-group>
//单独使用在小程序上要加个宽度
<r-cell title="单元格" is-link />
<r-cell title="单元格" value="内容" />

API

CellGroup Props

名称 说明 类型 默认值 可选值
title 分组标题 String - -
inset 是否展示为圆角卡片风格 Boolean false true
border 是否显示外边框 Boolean false true
customStyle 自定义样式 Object {}
themeName r-theme 的主题 String default

Cell Props

名称 说明 类型 默认值 可选值
title 左侧标题 String - -
value 右侧内容 String - -
label 标题下方的描述信息 String - -
size 单元格大小 String - large | normal
icon 左侧图标名称,等同于 r-icon 组件的 name 属性 String -
iconPrefix 图标类名前缀，等同于 r-icon 组件的 prefix 属性 String r-icon iconfont
border 是否显示内边框 Boolean true false
clickable 是否开启点击反馈 Boolean false true
hoverClass 反馈的动画类 String animate__fadeIn 更多可使用animate
isLink 是否展示右侧箭头并开启点击反馈 Boolean false true
required 是否显示表单必填星号 Boolean false true
center 是否使内容垂直居中 Boolean false true
arrowDirection 箭头方向 String right left | up | down | right
titleStyle 左侧标题额外样式 Object {}
titleClass 左侧标题额外类名 String -
valueClass 右侧内容额外类名 String -
labelClass 描述信息额外类名 String -
customClass 自定义类 String -
themeName r-theme 的主题名称 String default
rightIconCustomStyle 右侧 icon 自定义样式 Object {}

CellGroup Slots

名称 说明
default 默认插槽
title 自定义分组标题

Cell Slots

名称 说明
title 自定义左侧标题
value 自定义右侧内容
label 自定义标题下方的描述信息
icon 自定义左侧图标
rightIcon 自定义右侧图标
extra 自定义单元格最右侧的额外内容

Cell Events

名称 说明 回调参数
click 点击单元格时触发 e

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

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

加载更多...