Cell 单元行

使用指南

列表的基础展示单位，用于展现并列层级的信息内容，由同一类型的单元行组成列表，承载信息展示、功能入口、功能操作等。单元行内容通常由文字信息、图片、操作等元素构成，灵活组合可适应各类场景的展示与操作需求。

规则

• 单元行可分为2个基础类型：单行标题与带二级描述。与操作按钮、图标组合、选择组件组合使用。

代码演示

查看代码

<template>
  <div class="cell-demo-list">
    <p>单行标题</p>
    <h3-cell title="单元行 展示" />
    <h3-cell title="单元行 展示" value="详细信息" />

    <p class="tip">
      提示可操作或进入下一层级
    </p>
    <h3-cell title="单元行 操作" isLink />
    <h3-cell title="单元行 不可用状态" disabled isLink />

    <p class="tip">
      文字操作按钮
    </p>
    <h3-cell title="单元行">
      <template #default>
        <span class="action-txt">操作</span>
      </template>
    </h3-cell>
    <h3-cell title="单元行" disabled>
      <template #default>
        <span class="action-txt">操作</span>
      </template>
    </h3-cell>
    <p>带二级描述</p>
    <h3-cell
      title="单元行标题"
      label="二级描述"
      value="详细信息"
      isLink
    />
    <h3-cell
      title="单元行标题不可用状态"
      label="二级描述"
      value="详细信息"
      isLink
      disabled
    />
    <p>与图标组合</p>

    <h3-cell
      title="单元行标题测试测试测试测试测试测试"
      value="详细信息"
      icon="IconScanStroke"
      isLink
    />

    <p>与图片组合</p>
    <!-- <h3-cell title="姓名" isLink>
      <template #icon>
        <h3-avatar class="cell-left-avatar" name="tingle" />
      </template>
    </h3-cell> -->
    <h3-cell title="姓名" label="二级描述" isLink>
      <template #icon>
        <h3-avatar class="cell-left-avatar1" name="tingle" />
      </template>
    </h3-cell>

    <p>作为操作按钮</p>
    <p>居左</p>
    <h3-cell class="cell-btn" title="操作选项" touchable />
    <p>居中</p>
    <h3-cell class="cell-btn cell-btn-center" title="操作选项" touchable />
  </div>
</template>

<script>
import H3Cell from '@/components/h3-cell/';
import H3Avatar from '@/components/h3-avatar/';
// import H3Icon from '@lateinos/thinking-ui/src/components/h3-icon';

export default {
  name: 'H3cell',
  components: {
    H3Cell,
    H3Avatar,
    // H3Icon,
  },
  data () {
    return {};
  },
  methods: {
    handleCellClick () {
      console.log('handleCellClick');
    },
  },
};
</script>
<style lang="less">
.cell-demo-list {
  .cell-btn {
    .h3think-cell__title-text {
      color: #315efb;
    }
    &.cell-btn-center {
      .h3think-cell__title {
        text-align: center;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.cell-demo-list {
  padding: 8px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
    &.tip {
      font-size: 14px;
      color: #666;
    }
  }
  .h3think-cell.h3think-cell--disabled {
    .action-txt {
      color: #bbbeca;
    }
  }
  .action-txt {
    color: #315efb;
  }
  .cell-left-avatar {
    width: 28px;
    height: 28px;
    margin-right: 12px;
  }
  .cell-left-avatar1 {
    margin-right: 12px;
    width: 40px;
    height: 40px;
  }
  .cell-icon {
    margin-right: 12px;
    margin-top: 10px;
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

新增组件

API

Prop

属性	说明	类型	默认值
icon	图标	string | slot	-
title	标题	string | slot	-
label	备注信息、二级描述	string	-
is-link	是否可点击的链接， true时有按压效果和右侧箭头, touchable 为false时无按压效果	boolean	-
value	右侧显示文字	string	-
touchable	是否有按压效果	boolean	-

Event

事件名	说明	参数
cellClick	点击单元格触发	-

Slots

参数	说明
icon	图标区域插槽
title	标题区域插槽
default	默认插槽, 修改value