lighting-ui/packages/lc-cell/README_cn.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-cell 

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

### 规则
  - 一般由主要信息、操作动作组成，信息在左、操作在右
  - 可以对 `label, title, value` 进行 `slot` 覆盖
  
## [Demo](https://h5.m.taobao.com/trip/lc-cell/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Flc-cell%2Fdemo%2Findex.native-min.js)
<img src="https://img.alicdn.com/tfs/TB1mIA5c5qAXuNjy1XdXXaYcVXa-750-1334.jpg" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB15ta_SpXXXXcFaVXXXXXXXXXX-191-197.png" width="160"/>

## 使用方法

```vue
<template>
  <div class="container">
    <div class="demo">
      <text class="demo-title">单行列表</text>
      <wxc-cell label="单行列表"
        title="详细信息"
        :has-arrow="true"
        :link="link"
        @wxcCellClicked="wxcCellClicked">
      </wxc-cell>
      <wxc-cell label="单行列表"
        :has-arrow="true"
        @wxcCellClicked="wxcCellClicked">
      </wxc-cell>
      <wxc-cell label="单行列表"
        desc="详细信息"
        @wxcCellClicked="wxcCellClicked"
        :has-arrow="true">
      </wxc-cell>
      <wxc-cell label="单行列表"
        :icon="icon"
        :has-arrow="true"
        :auto-accessible="true">
      </wxc-cell>
      <wxc-cell label="单行列表"
        :icon="icon"
        desc="详细信息"
        :has-arrow="true"
        :auto-accessible="true">
      </wxc-cell>
    </div>

    <div class="demo">
      <text class="demo-title">多行列表</text>
      <wxc-cell label="多行列表"
        title="更多"
        @wxcCellClicked="wxcCellClicked"
        :has-arrow="true"
        :has-bottom-border="false">
      </wxc-cell>
      <wxc-cell label="多行列表"
        :has-arrow="true"
        @wxcCellClicked="wxcCellClicked"
        :has-top-border="false"
        :has-bottom-border="false">
      </wxc-cell>
      <wxc-cell label="多行列表"
        @wxcCellClicked="wxcCellClicked"
        cell-index="last"
        :has-arrow="true"
        :has-top-border="false">
      </wxc-cell>
    </div>

    <div class="demo">
      <text class="demo-title">自定义样式</text>
      <wxc-cell :has-arrow="false"
        :auto-accessible="false">
        <text :style="{color:color}"
          slot="label">自定义标签</text>
        <switch slot="value"
          @change="color= color==='#4A4A4A' ? '#0785DB' : '#4A4A4A'"></switch>
      </wxc-cell> 
    </div>
  </div>
</template>

<script>
const modal = weex.requireModule('modal');
  import { LcCell } from '../../index';
  import Title from '../_mods/title.vue';
  import Category from '../_mods/category.vue';
  import { setTitle } from '../_mods/set-nav';

  export default {
    components: { LcCell, Title, Category },
    created () {
      setTitle('Cell')
    },
    data: () => ({
      color: '#0785DB',
      color1: '#399DE2',
      textAlign: 'right',
      cellStyle: {
        backgroundColor: '#f2f3f4',
        marginBottom: '40'
      },
      link: 'https://h5.m.taobao.com/trip/weex-ui/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fweex-ui%2Fdemo%2Findex.native-min.js',
      icon: 'https://img.alicdn.com/tfs/TB1eLvjSXXXXXaiXXXXXXXXXXXX-144-166.jpg'
    }),
    methods: {
      lcCellClicked (e) {
        console.log(e)
      }
    }
  };
</script>
```
更详细代码可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/cell/index.vue)


### 可配置参数

| 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` | 是否有下边框 |
| cell-style | `Object` | `N`| `-` | 单元格样式 |
| label-style | `Object` | `N`| `-` | 标签样式 |
| desc-style | `Object` | `N`| `-` | 说明信息样式 |
| icon-style | `Object` | `N`| `-` | 标签图片样式 |
| title-style | `Object` | `N`| `-` |  右侧标题样式 |
| cell-index | `String` |`N`| `false` | 单元格在表格中的序号 `first` / `last` |
| icon | `String` | `N`| `-` | 标签图片 |

### Slot
1. `<slot name="label"></slot>`：label卡槽，替换默认 label 占位
2. `<slot name="title"></slot>`：title卡槽，替换默认 title 占位
3. `<slot name="value"></slot>`：右边卡槽，有需要传入switch等场景


### 事件回调
```
//点击事件回调  `@LcCellClicked="LcCellClicked"`
```