import{c as t,o as e,B as d}from"./vendor.36ea9f7d.js";const l={class:"markdown-body"},o=d('

Cell 列表组件

介绍

列表项，可组成列表。

安装

import { createApp } from 'vue';\nimport { Cell } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Cell);\n\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

// ...\nsetup() {\n    const testClick = (event) => {\n      alert(event);\n    };\n    return { testClick };\n}\n// ...\n

直接使用插槽

 <nut-cell title="我是标题" desc="描述文字">\n  <div>自定义内容</div>\n </nut-cell>  \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 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-align	String	“right”
is-link	是否展示右侧箭头并开启点击反馈	Boolean	false
icon	左侧图标名称或图片链接	String	-
url	点击后跳转的链接地址	String	-
to	点击后跳转的目标路由对象，同 vue-router 的 to 属性属性	String	-
replace	是否在跳转时替换当前页面历史	Boolean	false

Event

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

',22),n={expose:[],setup:d=>(d,n)=>(e(),t("div",l,[o]))};export default n;