Cell 单元格

介绍

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

引入

import { CellGroup, Cell } from 'mind-ui-vue';
Vue.use(CellGroup);
Vue.use(Cell);

示例

基础用法

<!-- 单独使用 -->
<m-cell icon="love" icon-color="#00CDA2" title="文本" value="内容" />

自定义内容

<m-cell icon="feed" icon-color="#00CDA2" title="自定义内容">
  <m-switch v-model="checked" />
</m-cell>

可点击的链接

<m-cell icon="location" icon-color="#00CDA2" title="标题文字" url="/pages/home/index" />

单元格组

<m-cell-group title="单元格分组" border card>
  <!-- 自定义分组后缀 -->
  <div slot="group-suffix">
    <m-icon name="category" />
  </div>

  <!-- cell 列表 -->
  <m-cell icon="love" icon-color="#00CDA2" title="图标+标题" />
  
  <m-cell icon="location" icon-color="#00CDA2" title="跳转" url="/" />

  <m-cell icon="tag" icon-color="#00CDA2" title="标签">
    <div class="tag-group">
      <m-tag type="warning" round>标签</m-tag>
      <m-tag m-class="tag" type="success" round>标签</m-tag>
      <m-tag m-class="tag" type="warning">标签</m-tag>
    </div>
  </m-cell>

  <m-cell icon="feed" icon-color="#00CDA2" title="表单组件">
    <m-switch v-model="switch" />
  </m-cell>

  <m-cell icon="feed" icon-color="#00CDA2" title="表单组件">
    <m-checkbox v-model="checked" checked-color="#00CDA2" />
  </m-cell>

  <m-cell icon="edit" icon-color="#00CDA2" title="文本" value="内容区" />
</m-cell-group>

Api

CellGroup Props

参数	说明	类型	可选值	默认值
title	分组标题，为空时不显示	String	-	-
border	是否给每个 cell 显示下边框（最后一个无下边框）	Boolean	-	true
card	是否为卡片式	Boolean	-	false

Cell Props

参数	说明	类型	可选值	默认值
icon	左侧图标或图片	String	-	-
title	左侧标题	String	-	-
value	右侧内容	String	-	-
border	是否显示下边框	Boolean	-	false
url	点击跳转链接地址	String	-	-
link-type	跳转类型	String	replace to	to
ellipsis v1.0.3	value 内容超出省略	Boolean	-	false

Cell Events

事件名称	说明	返回值
click	cell 点击事件回调	event

CellGroup Slots

名称	说明
group-suffix	分组 header 的后缀内容

Cell Slots

名称	说明
-	value 区域自定义内容