首页 发现 帮助
登录
githab
/
nutui
3
0
派生 0
文件
目录树: a2016afb03
分支列表 标签列表
nutui
/
3.1.6
/
doc.8804f8ee.js

doc.8804f8ee.js 10 KB
文件历史 原始文件

1 
  1. import{e as s,o as a,G as t}from"./vendor.9cc7b6f2.js";const n={class:"markdown-body"},l=[t('<h1>Cell 单元格</h1><h3>介绍</h3><p>列表项，可组成列表。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">import</span> { Cell,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Cell).use(Icon);\n</code></pre><h3>基本用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;我是标题&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;描述文字&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;我是标题&quot;</span> <span class="hljs-attr">sub-title</span>=<span class="hljs-string">&quot;副标题描述&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;描述文字&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;点击测试&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;testClick&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;圆角设置 0&quot;</span> <span class="hljs-attr">round-radius</span>=<span class="hljs-string">&quot;0&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-comment">// ...</span>\n<span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">import</span> { Toast } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n  <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n      <span class="hljs-keyword">const</span> switchChecked = ref(<span class="hljs-literal">true</span>);\n      <span class="hljs-keyword">const</span> testClick = <span class="hljs-function">(<span class="hljs-params">event</span>) =&gt;</span> {\n        Toast.text(<span class="hljs-string">&#39;点击事件&#39;</span>)\n      };\n      <span class="hljs-keyword">return</span> { testClick,switchChecked };\n  }\n}\n<span class="hljs-comment">// ...</span>\n</code></pre><h3>直接使用插槽</h3><pre><code class="language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;我是标题&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;描述文字&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>自定义内容<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>  \n</code></pre><h3>链接 | 分组用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;链接 | 分组用法&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;链接&quot;</span> <span class="hljs-attr">is-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;URL 跳转&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;https://jd.com&quot;</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">url</span>=<span class="hljs-string">&quot;https://jd.com&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;路由跳转 ’/‘ &quot;</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell-group</span>&gt;</span>\n</code></pre><h3>自定义右侧箭头区域</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;自定义右侧箭头区域&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Switch&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:link</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">nut-switch</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;switchChecked&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell-group</span>&gt;</span>\n</code></pre><h3>自定义左侧 Icon 区域</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;自定义左侧 Icon 区域&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;图片&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:icon</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;nut-icon&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell-group</span>&gt;</span>\n</code></pre><h3>单元格展示图标</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;姓名&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;张三&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n</code></pre><h3>只展示 desc ，可通过 desc-text-align 调整内容位置</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">desc-text-align</span>=<span class="hljs-string">&quot;left&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;张三&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\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>round-radius</td><td>圆角半径</td><td>Number</td><td>6px</td></tr><tr><td>url <code>小程序不支持</code></td><td>点击后跳转的链接地址</td><td>String</td><td>-</td></tr><tr><td>to <code>小程序不支持</code></td><td>点击后跳转的目标路由对象，同 vue-router 的 <a href="https://router.vuejs.org/zh/api/#to">to 属性</a> 属性</td><td>String｜Object</td><td>-</td></tr><tr><td>replace <code>小程序不支持</code></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><h2>Slots</h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>icon <code>v3.1.4</code></td><td>自定义左侧 icon 区域</td></tr><tr><td>default</td><td>自定义内容</td></tr><tr><td>link</td><td>自定义右侧 link 区域</td></tr></tbody></table>',27)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
    2.