wxc-cell

Weex 单元格组件，可用作展示列表信息、链接或者表单等

规则

  • 一般由主要信息、操作动作组成，信息在左、操作在右
  • 可以对 label, title, value 进行 slot 覆盖

    Demo

wxc-cell 单元格 - 图1 wxc-cell 单元格 - 图2

使用方法

  1. <template>
  2.   <div class="container">
  3.     <div class="demo">
  4.       <text class="demo-title">列表list展示</text>
  6.       <wxc-cell label="标题"
  7.                 title="Weex Ui"
  8.                 :has-arrow="true"
  9.                 @wxcCellClicked="wxcCellClicked"
  10.                 :has-margin="true"></wxc-cell>
  12.       <wxc-cell label="标题"
  13.                 title="带链接"
  14.                 :has-arrow="true"
  15.                 link="https://h5.m.taobao.com/trip/home/index.html"
  16.                 @wxcCellClicked="wxcCellClicked"
  17.                 spm="181.12312312.12312.d01"
  18.                 :has-top-border="false"></wxc-cell>
  20.       <wxc-cell label="标题"
  21.                 title="Weex Ui"
  22.                 :has-arrow="true"
  23.                 @wxcCellClicked="wxcCellClicked"
  24.                 :has-top-border="false"></wxc-cell>
  26.     </div>
  27.     <div class="demo">
  28.       <text class="demo-title">不配置label</text>
  29.       <wxc-cell title="标题"
  30.                 :has-arrow="true"
  31.                 @wxcCellClicked="wxcCellClicked"
  32.                 :has-top-border="true"></wxc-cell>
  33.     </div>
  35.     <div class="demo">
  36.       <text class="demo-title">配置附加信息</text>
  37.       <wxc-cell title="标题"
  38.                 desc="这里是附加信息"
  39.                 :has-arrow="true"
  40.                 @wxcCellClicked="wxcCellClicked"
  41.                 :has-top-border="true"></wxc-cell>
  42.     </div>
  44.     <div class="demo">
  45.       <text class="demo-title">不显示箭头</text>
  46.       <wxc-cell title="标题"
  47.                 :has-arrow="false"
  48.                 @wxcCellClicked="wxcCellClicked"
  49.                 :has-top-border="true"></wxc-cell>
  50.     </div>
  51.     <div class="demo">
  52.       <text class="demo-title">自定义子元素</text>
  53.       <wxc-cell title="这里是标题"
  54.                 :has-arrow="false"
  55.                 :has-top-border="true">
  56.         <switch slot="value"></switch>
  57.       </wxc-cell>
  58.     </div>
  59.   </div>
  60. </template>
  62. <script>
  63.   import { WxcCell } from 'weex-ui';
  64.   export default {
  65.     components: { WxcCell },
  66.     methods: {
  67.       wxcCellClicked (e) {
  68.         console.log(e)
  69.       }
  70.     }
  71.   };
  72. </script>

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
label String N - 前置标签
title String N - 标题
desc String N - 展示说明信息
link String N - 跳转链接，无链接不跳转
arrow-icon String N 箭头 覆盖右向箭头
has-arrow Bool N false 是否显示箭头
has-top-border Bool N false 是否有上边框
has-bottom-border Bool N true 是否有下边框
has-vertical-indent Bool N true 是否有垂直间距
has-margin Bool N false cell之间是否有margin
cell-style Object N {} 自定义cell的样式
extraContent String N {} 额外的内容

Slot

  • ：label卡槽，替换默认 label 占位
  • ：title卡槽，替换默认 title 占位
  • ：右边卡槽，有需要传入输入框、checkbox的场景

    事件回调

  1. //点击事件回调  `@wxcCellClicked="wxcCellClicked"`

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-cell/