| 1 |
- import{c as t,o as e,C as l}from"./vendor.870c33cc.js";const d={class:"markdown-body"},o=l('<h1>Cell 单元格</h1><h3>介绍</h3><p>列表项，可组成列表。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Cell,CellGroup } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Cell);\napp.use(CellGroup);\n\n</code></pre><h2>代码示例</h2><h3>基本用法</h3><pre><code class="language-html"><nut-cell title="我是标题" desc="描述文字"></nut-cell>\n<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>\n<nut-cell title="点击测试" @click="testClick"></nut-cell>\n</code></pre><pre><code class="language-javascript">// ...\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</code></pre><h3>直接使用插槽</h3><pre><code class="language-html"> <nut-cell title="我是标题" desc="描述文字">\n <div>自定义内容</div>\n </nut-cell> \n</code></pre><h3>链接 | 分组用法</h3><pre><code class="language-html"><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</code></pre><h3>自定义右侧箭头区域</h3><pre><code class="language-html"><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</code></pre><h3>单元格展示图标</h3><pre><code class="language-html"><nut-cell title="姓名" icon="my" desc="张三"></nut-cell>\n</code></pre><h3>只展示 desc ，可通过 desc-text-align 调整内容位置</h3><pre><code class="language-html"><nut-cell desc-text-align="left" desc="张三"></nut-cell>\n</code></pre><h2>API</h2><h3>Prop</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>标题名称</td><td>String</td><td>-</td></tr><tr><td>sub-title</td><td>左侧副标题</td><td>String</td><td>-</td></tr><tr><td>desc</td><td>右侧描述</td><td>String</td><td>-</td></tr><tr><td>desc-text-align</td><td>右侧描述文本对齐方式 <a href="https://www.w3school.com.cn/cssref/pr_text_text-align.asp">text-align</a></td><td>String</td><td>right</td></tr><tr><td>is-link</td><td>是否展示右侧箭头并开启点击反馈</td><td>Boolean</td><td>false</td></tr><tr><td>icon</td><td>左侧 <a href="#/icon">图标名称</a> 或图片链接</td><td>String</td><td>-</td></tr><tr><td>url</td><td>点击后跳转的链接地址</td><td>String</td><td>-</td></tr><tr><td>to</td><td>点击后跳转的目标路由对象，同 vue-router 的 <a href="https://router.vuejs.org/zh/api/#to">to 属性</a> 属性</td><td>String</td><td>-</td></tr><tr><td>replace</td><td>是否在跳转时替换当前页面历史</td><td>Boolean</td><td>false</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>click</td><td>点击事件</td><td>event:Event</td></tr></tbody></table>',24),u={expose:[],setup:l=>(l,u)=>(e(),t("div",d,[o]))};export default u;
|
