wxc-cell

优质

小牛编辑

132浏览

2023-12-01

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

规则

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

Demo

使用方法

<template>
  <div>
    <div>
      <text>列表list展示</text>

      <wxc-cell label="标题"
                title="Weex Ui"
                :has-arrow="true"
                @wxcCellClicked="wxcCellClicked"
                :has-margin="true"></wxc-cell>

      <wxc-cell label="标题"
                title="带链接"
                :has-arrow="true"
                link="https://h5.m.taobao.com/trip/home/index.html"
                @wxcCellClicked="wxcCellClicked"
                spm="181.12312312.12312.d01"
                :has-top-border="false"></wxc-cell>

      <wxc-cell label="标题"
                title="Weex Ui"
                :has-arrow="true"
                @wxcCellClicked="wxcCellClicked"
                :has-top-border="false"></wxc-cell>

    </div>
    <div>
      <text>不配置label</text>
      <wxc-cell title="标题"
                :has-arrow="true"
                @wxcCellClicked="wxcCellClicked"
                :has-top-border="true"></wxc-cell>
    </div>

    <div>
      <text>配置附加信息</text>
      <wxc-cell title="标题"
                desc="这里是附加信息"
                :has-arrow="true"
                @wxcCellClicked="wxcCellClicked"
                :has-top-border="true"></wxc-cell>
    </div>

    <div>
      <text>不显示箭头</text>
      <wxc-cell title="标题"
                :has-arrow="false"
                @wxcCellClicked="wxcCellClicked"
                :has-top-border="true"></wxc-cell>
    </div>
    <div>
      <text>自定义子元素</text>
      <wxc-cell title="这里是标题"
                :has-arrow="false"
                :has-top-border="true">
        <switch slot="value"></switch>
      </wxc-cell>
    </div>
  </div>
</template>

<script>
  import { WxcCell } from 'weex-ui';
  export default {
    components: { WxcCell },
    methods: {
      wxcCellClicked (e) {
        console.log(e)
      }
    }
  };
</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

<slot name="label"></slot>：label卡槽，替换默认 label 占位
<slot name="title"></slot>：title卡槽，替换默认 title 占位
<slot name="value"></slot>：右边卡槽，有需要传入输入框、checkbox的场景

事件回调

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