frontend / zui

cell.md 3.18 KB

Cell 单元格

常用单元格

a4a85439be8526638d0ddc8bf1d103dd971276d7/examples/views/docs/component/cell.md#">基础用法

基础单元格包括标题, 内容, 描述

::: snippet 配置title属性显示标题, 配置value属性显示内容, 配置label属性显示描述

<template>
  <div class="demo-cell">
    <zui-cell title="选项一" value="内容一"></zui-cell>
    <zui-cell title="选项二" value="内容二" label="描述"></zui-cell>
  </div>
</template>

<style>
.demo-cell {
  width: 400px;
}
</style>

:::

a4a85439be8526638d0ddc8bf1d103dd971276d7/examples/views/docs/component/cell.md#">显示图标

单元格支持显示左侧图标

::: snippet 支持配置icon属性显示图标，也可通过icon插槽配置自定义内容

<template>
  <div class="demo-cell">
    <zui-cell title="显示图标" value="内容一" icon="message"></zui-cell>
    <zui-cell title="自定义图标" value="内容二">
      <zui-icon slot="icon" name="attachmoney" size="1.2rem" color="deepskyblue" />
    </zui-cell>
  </div>
</template>

<style>
.demo-cell {
  width: 400px;
}
</style>

:::

a4a85439be8526638d0ddc8bf1d103dd971276d7/examples/views/docs/component/cell.md#">点击效果

支持配置is-link属性显示点击效果，配置right-icon属性改变右侧图标，配置right插槽自定义右侧内容

::: snippet 配置right-icon属性改变右侧图标

<template>
  <div class="demo-cell">
    <zui-cell title="默认点击" value="内容" is-link></zui-cell>
    <zui-cell title="右侧图标" value="内容" right-icon="expandmore" is-link></zui-cell>
    <zui-cell title="自定义右侧内容" value="内容" is-link>
      <div slot="right">Right</div>
    </zui-cell>
  </div>
</template>

<style>
.demo-cell {
  width: 400px;
}
</style>

:::

a4a85439be8526638d0ddc8bf1d103dd971276d7/examples/views/docs/component/cell.md#">综合示例

一个常用的单元格示例

::: snippet 综合示例

<template>
  <div class="demo-cell">
    <zui-cell title="单元格" value="内容" label="描述"></zui-cell>
    <zui-cell title="有图标" value="内容" icon="trendingup"></zui-cell>
    <zui-cell is-link>
      <zui-icon slot="icon" name="error" size="2rem" color="deeppink" />
      <div slot="title">
        <div class="zui-cell__title">开启微信通知</div>
        <div class="zui-cell__label" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
          关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息
        </div>
      </div>
      <div slot="right" style="height: 100%; text-align: right; display: flex; flex-direction: column; justify-content: space-between;">
        <div style="font-size: 12px; color: grey;">2020-03-18</div>
        <div><zui-tag size="tiny" shape="dot" type="fill"></zui-tag></div>
      </div>
    </zui-cell>
  </div>
</template>

<style>
.demo-cell {
  width: 400px;
}
</style>

:::

API

Attribute 属性

参数|说明|类型|可选值|默认值 -|-|-|-|- icon | 图标 | String | - | - title | 标题 | String | - | - value | 内容 | String | - | - label | 标签 | String | - | - isLink | 是否显示点击效果 | Boolean | - | - rightIcon | 右侧图标 | String | - | enter

Events 事件

事件名称|说明|回调参数 -|-|- click | 按钮点击事件 | -