引入

  1. {
  2.   "usingComponents": {
  3.     "x-cell":"waft-ui/assembly/cell/cell"
  4.   }
  5. }

代码示例

  1. <x-cell title="登录账号" value="天猫精灵" size="small" align="left" labelWidth="160" border="{{false}}" titleColor="#7282A3"></x-cell>

效果展示

cell.png

API

  • props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | size | 组件的尺寸,支持 normal | small , normal标准120rpx高度, small标准81rpx高度 | string | normal | | title | cell 左侧的标题 | string | | | icon | 最前面的 icon 图标, 只接受 图片 | string | | | label | cell 左侧的 label 介绍文本 | string | | | value | cell 右侧的内容, 只设置 value 会左对齐 | string | | | align | cell 右侧内容的对齐方式, 支持 right | left | string | right | | center | cell 的内容是否居中 | boolean | true | | isLink | 是否显示箭头, 默认右箭头, 配合 arrow-direction 控制箭头方向 | boolean | false | | arrowDirection | 箭头显示方向, 需配合 isLink 使用,单独设置无效 | string | right | | url | 进行跨应用跳转 | string | | | to | 进行路由跳转 | string | | | border | 是否显示内边框 | boolean | true | | labelWidth | cell 左侧部分的宽度, 0 自适应 | number | 0 | | titleColor | 标题字体颜色 | string | | | titleWeight | 标题字体粗细 | string | | | labelColor | label字体颜色 | string | | | valueColor | value字体颜色 | string | |

  • Events | 事件名 | 说明 | 参数 | | —- | —- | —- | | click | 点击单元格触发 | event: Event |

  • slot | 名称 | 说明 | | —- | —- | | default | 自定义右侧 value 的内容, props 优先级更高 | | icon | 自定义左侧 icon 的内容, props 优先级更高 | | title | 自定义左侧 title 的内容, props 优先级更高 | | label | 自定义标题下方 label 的内容, props 优先级更高 | | extra | 自定义单元格最右侧的额外内容, props 优先级更高 |