Cell 列表组件

介绍

列表项，可组成列表。

安装

import { createApp } from 'vue';
import { Cell,CellGroup } from '@nutui/nutui';
const app = createApp();
app.use(Cell);
app.use(CellGroup);

代码示例

基本用法

<nut-cell title="我是标题" desc="描述文字"></nut-cell>
<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
<nut-cell title="点击测试" @click="testClick"></nut-cell>

// ...
import { ref } from 'vue';
import { Toast } from '@nutui/nutui';
export default {
  setup() {
      const switchChecked = ref(true);
      const testClick = (event) => {
        Toast.text('点击事件')
      };
      return { testClick,switchChecked };
  }
}
// ...

直接使用插槽

 <nut-cell title="我是标题" desc="描述文字">
  <div>自定义内容</div>
 </nut-cell>

链接 | 分组用法

<nut-cell-group title="链接 | 分组用法">
  <nut-cell title="链接" is-link></nut-cell>
  <nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
  <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
</nut-cell-group>

自定义右侧箭头区域

<nut-cell-group title="自定义右侧箭头区域">
  <nut-cell title="Switch">
    <template v-slot:link>
      <nut-switch v-model="switchChecked" />
    </template>
  </nut-cell>
</nut-cell-group>

单元格展示图标

<nut-cell title="姓名" icon="my" desc="张三"></nut-cell>

只展示 desc ，可通过 desc-text-align 调整内容位置

<nut-cell desc-text-align="left" desc="张三"></nut-cell>

API

Prop

Event