
## Cell 组件

列表组件 `Cell` 与 列表组组件 `CellGroup`

## Import
```js
import { Cell, CellGroup } from 'bxs-ui-vue';
```

## Example

### 单行列表示例

```html
<div class="title">带说明的列表项</div>
<bxs-cell-group>
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表一' + moreTextDefault"
    value="说明文字"
    />
</bxs-cell-group>

<div class="title">带图标、说明的列表项</div>
<bxs-cell-group>
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表一' + moreTextDefault"
    value="图片示例"
    :logo="logo"
    />
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表二' + moreTextDefault"
    icon="star"
    icon-size="24px"
    icon-color="#0083fe"
    :logo="logo"
    value="图标示例"
    />
</bxs-cell-group>

<div class="title">带跳转的列表项</div>
<bxs-cell-group>
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表一' + moreTextDefault"
    is-link
    />
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表二' + moreTextDefault"
    is-link
    />
</bxs-cell-group>


<div class="title">带说明、跳转的列表项</div>
<bxs-cell-group>
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表一' + moreTextDefault"
    value="说明文字"
    is-link
    />
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表二' + moreTextDefault"
    value="说明文字"
    is-link
    />
</bxs-cell-group>

<div class="title">带图标、说明、跳转的列表项</div>
<bxs-cell-group>
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表一' + moreTextDefault"
    value="说明文字"
    :logo="logo"
    is-link
    />
  <bxs-cell
    @click="cellClick"
    @click-right="cellRightClick"
    :title="'列表二' + moreTextDefault"
    value="说明文字"
    :logo="logo"
    is-link
    />
</bxs-cell-group>

<div class="title">带图标、说明、消息、跳转的列表项</div>
<bxs-cell-group title="常用工具">
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表一' + moreTextDefault"
    :badge="true"
    :logo="logo"
    is-link
    />
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表二' + moreTextDefault"
    value="说明文字"
    :badge="true"
    :logo="logo"
    is-link
    />
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表三' + moreTextDefault"
    badge="1"
    :logo="logo"
    is-link
    />
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表四' + moreTextDefault"
    badge="9"
    :logo="logo"
    is-link
    />
    <bxs-cell
    @click-right="cellRightClick"
    :title="'列表五' + moreTextDefault"
    value="图片示例"
    :badge="true"
    :logo="logo"
    />
  <bxs-cell
    @click-right="cellRightClick"
    :title="'列表六' + moreTextDefault"
    icon="star"
    badge="2"
    icon-size="24px"
    icon-color="#0083fe"
    :logo="logo"
    value="图标示例"
    />
</bxs-cell-group>
```

### 多行列表示例
```html
<div class="title">文字组合列表</div>
<bxs-cell-group :title="'文字组合列表' + moreTextDefault">
  <bxs-cell
    :subtitle="'列表副文案' + moreTextDefault"
    :subtitle-one-line="true"
    @click="cellClick"
    :title="'标题一' + moreTextDefault"
    />
  <bxs-cell
    subtitle="列表副文案文字不限制的话就自适应列表副文案文字不限制的话就自适应"
    @click="cellClick"
    :title="'标题二' + moreTextDefault"
    />
</bxs-cell-group>

<div class="title">文字组合列表／有时间日期</div>
<bxs-cell-group
  :title="'文字组合列表' + moreTextDefault"
  >
  <bxs-cell
    :subtitle="'张某某' + moreTextDefault"
    :subtitle-one-line="true"
    :value="new Date(1545716407632)"
    value-formatter="YYYY-MM-DD"
    @click="cellClick"
    :title="'标题一' + moreTextDefault"
    />
  <bxs-cell
    value="2017-02-08 12:11:53"
    :subtitle="'张某某' + moreTextDefault"
    @click="cellClick"
    :title="'标题二' + moreTextDefault"
    />
</bxs-cell-group>

<div class="title">图文组合列表/有主副标题</div>
<bxs-cell-group title="图文组合列表">
  <bxs-cell
    :subtitle="'列表副文案' + moreText"
    :subtitle-one-line="true"
    :logo="logo"
    @click="cellClick"
    :title="'标题一' + moreTextDefault"
    />
  <bxs-cell
    :subtitle="'列表副文案' + moreText"
    :logo="logo"
    @click="cellClick"
    :title="'标题二' + moreTextDefault"
    />
</bxs-cell-group>

<div class="title">图文组合列表/有主副标题/有查看更多</div>
<bxs-cell-group
  :more-threshold="2"
  more-text="查看更多~"
  :title="'图文组合列表' + moreTextDefault"
  >
  <bxs-cell
    :subtitle="'列表副文案' + moreText"
    :subtitle-one-line="true"
    :logo="logo"
    @click="cellClick"
    :title="'标题一' + moreTextDefault"
    />
  <bxs-cell
    :subtitle="'列表副文案' + moreText"
    :logo="logo"
    @click="cellClick"
    :title="'标题二' + moreTextDefault"
    />
  <bxs-cell
    :subtitle="'列表副文案' + moreText"
    :logo="logo"
    @click="cellClick"
    :title="'标题三' + moreTextDefault"
    />
</bxs-cell-group>

<div class="title">图文组合列表/有主副标题/有时间</div>
<bxs-cell-group
  @click="groupClickHandler"
  :is-link="true"
  linkUrl="http://www.baidu.com"
  link-text="查看更多"
  :more-threshold="1"
  :title="'图文组合列表' + moreTextDefault"
  >
  <bxs-cell
    subtitle="列表副文案只显示一行，显示不下省略号列表副文案只显示一行，显示不下省略号"
    :subtitle-one-line="true"
    value="3:12"
    :logo="logo"
    @click="cellClick"
    :title="'标题一' + moreTextDefault"
    />
  <bxs-cell
    subtitle="列表副文案只显示一行，显示不下省略号列表副文案只显示一行，显示不下省略号"
    value="3:12"
    :logo="logo"
    @click="cellClick"
    :title="'标题二' + moreTextDefault"
    />
</bxs-cell-group>

<div class="title">图文组合列表/有主副标题/有时间/有红点消息</div>
<bxs-cell-group
  @click="groupClickHandler"
  title="图文组合列表"
  >
  <div slot="right">
    <bxs-icon
      name="more"
      color="#ccc"
      size="24px"
      />
  </div>
  <bxs-cell
    subtitle="列表副文案只显示一行，显示不下省略号列表副文案只显示一行，显示不下省略号"
    :subtitle-one-line="true"
    value="3:12"
    :badge="true"
    :logo="logo"
    @click="cellClick"
    :title="'标题一' + moreTextDefault"
    />
  <bxs-cell
    subtitle="列表副文案只显示一行，显示不下省略号列表副文案只显示一行，显示不下省略号"
    value="3:12"
    badge="3"
    :logo="logo"
    @click="cellClick"
    :title="'标题二' + moreTextDefault"
    />
</bxs-cell-group>

<div class="title">图文组合列表/有标签/阅读数/评论/无分割线</div>
<bxs-cell-group
  @click="groupClickHandler"
  title="图文组合列表"
  >
  <div slot="right">
    <span style="color: green;">自定义 <span style="color: red;">slot</span></span>
  </div>
  <bxs-cell
    :logo="logo"
    @click="cellClick"
    :title-one-line="false"
    subtitle="列表副文案 subtitle 属性"
    :logo-right="true"
    title="国寿福10天给了？"
    >
    <div
      slot="subtitle"
      class="flex-line"
      >
      <bxs-tag plain>中国人寿</bxs-tag>
      <span style="margin-left: 9px;">1233阅读数 · 8评论</span>
    </div>
  </bxs-cell>
  <bxs-cell
    :logo="logo"
    @click="cellClick"
    :title-one-line="false"
    subtitle="列表副文案 subtitle 属性"
    :logo-right="true"
    title="国寿福10天给了50万除了保险还有谁能这么帮你？"
    >
    <div
      slot="subtitle"
      class="flex-line"
      >
      <bxs-tag plain>中国人寿</bxs-tag>
      <span style="margin-left: 9px;">1233阅读数 · 8评论</span>
    </div>
  </bxs-cell>
  <bxs-cell
    :logo="logo"
    @click="cellClick"
    :title-one-line="false"
    subtitle="列表副文案 subtitle 属性"
    :logo-right="true"
    title="国寿福10天给了50万除了保险还有谁能这么帮你保险还有谁能这么帮你保险还有谁能这么帮你？"
    >
    <div
      slot="subtitle"
      class="flex-line"
      >
      <bxs-tag plain>中国人寿</bxs-tag>
      <span style="margin-left: 9px;">1233阅读数 · 8评论</span>
    </div>
  </bxs-cell>
</bxs-cell-group>
```

```js
export default {
data () {
  return {
    logo: '//img.winbaoxian.com/pic/app-article/logo.png?x-oss-process=image/crop,x_7,y_7,w_73,h_73',
    moreText: '测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下',
    moreTextDefault: window.location.search.indexOf('more-text') > 0 ? ' ~~  测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出测试下标题超出' : ''
  }
},
methods: {
  cellRightClick() {
    this.$toast('右侧点击事件')
  },
  cellClick() {
    this.$toast('列表点击事件')
  },
  groupClickHandler() {
    this.$toast('group 右侧点击事件')
  },
}
}
```

## Attribute

### CellGroup
| 参数| 说明 | 类型 | 默认值 | 是否必传 |
| --- | --- | --- |  --- |  --- |
| title | 列表组标题 | String | empty |  可选 |
| linkText | 右侧点击文案 | String | empty |  可选 |
| isLink | 是否展示右侧箭头 | String | empty |  可选 |
| linkUrl | 点击后跳转的url(有值则 click 事件不会被触发) | String | empty |  可选 |
| replace | 跳转时是否替换当前页面历史 | String | empty |  可选 |
| moreThreshold | 展示《查看更多》的列表阀值(正整数), 0=永不展示, n=超过n个时展示 | Number | empty |  可选 |
| moreText | 底部《查看更多》的文案 | String | '查看更多' |  可选 |

#### Cell
| 参数| 说明 | 类型 | 默认值 | 是否必传 |
| --- | --- | --- |  --- |  --- |
| title | 主标题 | String | empty |  `必传` |
| titleOneLine | 主标题是否仅展示一行 | Boolean | true | 可选 |
| subtitle | 副文案 | String | empty | 可选 |
| subtitleOneLine | 副文案是否仅展示一行 | Boolean | false | 可选 |
| value | 列表项的右上角文案 | String | Date | empty | 可选 |
| valueFormatter | 列表项的右上角日期格式(value 为 Date 时生效) | String | 'YYYY-MM-DD HH:mm:ss' | 可选 |
| icon | 左侧图标(图标组件 name) | String | empty | 可选 |
| iconPrefix | 左侧图标前缀(图标组件 prefix) | String | 'bx-icon' | 可选 |
| iconColor | 左侧图标颜色(图标组件 color) | String | empty | 可选 |
| iconSize | 左侧图标大小(图标组件 size) | String | empty | 可选 |
| logo | 图片(默认展示在左侧) | String | empty | 可选 |
| logoRight | 图片是否展示在右侧 | Boolean | false | 可选 |
| isLink | 是否展示右侧箭头, false 时 `click-right` 不会被触发 | Boolean | false | 可选 |
| badge | 红点, false=不显示, true=仅显示红点, 数字=显示红点及数字(isLink=true 时展示在右侧, 否则展示在左侧) | Boolean/Number | false | 可选 |

### Slot

#### CellGroup
| slot | 说明 |
| --- | --- |
|default| 列表们, 注意只能包含 Cell 组件 |
|right|自定义列表组头部右侧内容|

#### Cell
| slot | 说明 |
| --- | --- |
|subtitle|自定义副文案|

### Event
#### CellGroup
| 事件名 | 说明 | 参数 |
| --- | --- | --- |
|click|点击列表组状况栏时触发|--|

#### Cell
| 事件名 | 说明 | 参数 |
| --- | --- | --- |
|click|点击列表时触发|--|
|click-right|点击列表右侧时触发(仅单行列表触发, 右侧红点、说明文字、点击箭头区域)|--|
