import{e as s,o as a,G as t}from"./vendor.f7062dc0.js";const n={class:"markdown-body"},l=[t('

Cell 单元格

介绍

列表项，可组成列表。

安装

import { createApp } from 'vue';\nimport { Cell,Icon } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Cell).use(Icon);\n

代码示例

基本用法

<nut-cell title="我是标题" desc="描述文字"></nut-cell>\n<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>\n<nut-cell title="点击测试" @click="testClick"></nut-cell>\n<nut-cell title="圆角设置 0" round-radius="0"></nut-cell>\n
// ...\nimport { ref } from 'vue';\nimport { Toast } from '@nutui/nutui';\nexport default {\n  setup() {\n      const switchChecked = ref(true);\n      const testClick = (event) => {\n        Toast.text('点击事件')\n      };\n      return { testClick,switchChecked };\n  }\n}\n// ...\n

直接使用插槽

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

链接 | 分组用法

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

自定义右侧箭头区域

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

自定义左侧 Icon 区域

<nut-cell-group title="自定义左侧 Icon 区域">\n  <nut-cell title="图片">\n    <template v-slot:icon>\n      <img class="nut-icon" src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png" />\n    </template>\n  </nut-cell>\n</nut-cell-group>\n

单元格展示图标

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

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

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

API

Prop

字段说明类型默认值
title标题名称String-
sub-title左侧副标题String-
desc右侧描述String-
desc-text-align右侧描述文本对齐方式 text-alignStringright
is-link是否展示右侧箭头并开启点击反馈Booleanfalse
icon左侧 图标名称 或图片链接String-
round-radius圆角半径Number6px
url 小程序不支持点击后跳转的链接地址String-
to 小程序不支持点击后跳转的目标路由对象，同 vue-router 的 to 属性 属性String-
replace 小程序不支持是否在跳转时替换当前页面历史Booleanfalse

Event

名称说明回调参数
click点击事件event:Event

Slots

名称说明
icon v3.1.4自定义左侧 icon 区域
default自定义内容
link自定义右侧 link 区域
',28)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};