wxc-cell使用

如图。这是官网提供的Demo。

一个常规的wxc-cell由三部分组成：

1.   左侧的label。例如上面写着“标题”的区域。

2.   中间的title。例如上面写着“文字内容”、“带链接”等的区域。

3.   右侧的value。例如上面右侧的小箭头，以及checkbox。

任何一部分都可以为空。

 

一．     使用：

1.    将WxcCell引入，注意是用驼峰命名：

import { WxcCell } from 'weex-ui'

components: { WxcCell}

2.    引用WxcCell，注意是用全小写+横线的形式：

<wxc-cell label="左侧文本"
          title="中间文本"
          desc="title下方显示说明信息"
          link="http://www.baidu.com"
          :arrow-icon="arrawSrc"
          :has-arrow="true"
          :has-top-border="true"
          :has-bottom-border="true"
          :has-vertical-indent="true"
          :has-margin="true"
          :cell-style="cellStyle"
          :extraContent="infoInData">
</wxc-cell>

对应的data为：

data: function() {
    return {
        arrawSrc: "http://iconfont.alicdn.com/t/1489455806593.png@100h_100w.jpg",
        infoInData: "data中的信息",
        cellStyle: {
            backgroundColor: "#00f3f3",
            height: "200px"
        }
    }
}

其中：

①   有的属性需要直接设置，例如label；有的属性需要用v-bind:形式来设置，例如has-arrow。基本原则是，不需要引用data变量的直接设置；需要引用data变量的用v-bind来设置。布尔值必须用v-bind来设置。

②   arrow-icon为右侧图标的src，需要定义一个data属性来引用。需要配置一个可访问的图标地址。

③   cell-style是整个cell外围<div>的样式，需要定义一个data属性来引用。对于所有div可生效的样式，均可用在这里。

④   extraContent为附加内容，需要定义一个data属性来引用。

上面的例子，效果如下：

 

二．     自定义点击事件

<wxc-cell label="左侧文本"
          title="中间文本"
          desc="title下方显示说明信息"
          :has-arrow="true"
          link="http://www.baidu.com"
          @wxcCellClicked="wxcCellClicked">
</wxc-cell>

对应的methods：

methods: {
    wxcCellClicked() {
        console.log("自定义点击");
    }
}

注意点击事件与link并不冲突。点击整个cell时，会先触发自定义的点击事件，然后触发link。

 

三．     slot

wxc-cell支持3个slot：

1.    <slot name="label"></slot>：label卡槽，替换默认 label 占位。

2.    <slot name="title"></slot>：title卡槽，替换默认 title 占位。

3.    <slot name="value"></slot>：右边卡槽，有需要传入输入框、checkbox的场景。

例如，要自定义label和title：

<wxc-cell label="左侧文本"
          title="中间文本"
          desc="title下方显示说明信息"
          :has-arrow="true"
          link="http://www.baidu.com"
          @wxcCellClicked="wxcCellClicked">
    <text slot="label" style="color: red;">新的左侧文本</text>
    <text slot="title" style="color: green;">新的中间文本</text>
</wxc-cell>

注意slot属性要设置正确。

效果如下：

注意原始的label属性与title属性都被覆盖了。

desc属性由于依附于原始的title属性，因此也会被覆盖。