| 1 |
- import{c as t,o as e,A as d}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},n=d('<h1>Collapse 折叠面板</h1><h2>基本用法</h2><p>通过<code>v-model</code>控制展开的面板列表，<code>activeNames</code>为数组格式</p><pre><code class="language-html"><nut-collapse v-model="activeNames">\n <nut-collapse-item title="标题1" :name="1">\n 京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府 \n </nut-collapse-item>\n <nut-collapse-item title="标题2" :name="2">\n 京东到家：教师节期间 创意花束销量增长53倍 \n </nut-collapse-item>\n <nut-collapse-item title="标题3" :name="3" disabled>\n </nut-collapse-item>\n</nut-collapse>\n</code></pre><pre><code class="language-javascript">setup() {\n const activeNames = reactive([1, 2]);\n return {\n activeNames\n };\n}\n</code></pre><h3>手风琴</h3><p>通过<code>accordion</code>可以设置为手风琴模式，最多展开一个面板，此时<code>activeName</code>为字符串格式；<code>subTitle</code>可以设置副标题的内容</p><pre><code class="language-html"><nut-collapse v-model="activeName" :accordion="true">\n <nut-collapse-item :title="title1" :name="1">\n 华为终端操作系统EMUI 11发布，9月11日正式开启 \n </nut-collapse-item>\n <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">\n 中国服务机器人市场已占全球市场超1/4 \n </nut-collapse-item>\n <nut-collapse-item :title="title3" :name="3">\n QuestMobile：90后互联网用户规模超越80后达3.62亿 \n </nut-collapse-item>\n</nut-collapse>\n</code></pre><pre><code class="language-javascript">setup() {\n const activeName = ref(1);\n return {\n activeName,\n subTitle: '副标题'\n };\n}\n</code></pre><h3>图标展示</h3><p>通过<code>expandIconPosition</code>可以设置图标的位置，icon设置自定义图标，rotate设置图标旋转的角度</p><pre><code class="language-html"><nut-collapse v-model="activeName" :accordion="true" :expand-icon-position="expandIconPosition" :icon="icon" :rotate="rotate" :icon-width="iconWidth"\n :icon-height="iconHeight">\n <nut-collapse-item :title="title1" :name="1">\n 京东数科IPO将引入“绿鞋机制” \n </nut-collapse-item>\n <nut-collapse-item :title="title2" :name="2">\n 世界制造业大会开幕，阿里巴巴与安徽合作再升级\n </nut-collapse-item>\n</nut-collapse>\n</code></pre><pre><code class="language-javascript">setup() {\n return {\n activeName: 1,\n expandIconPosition: 'left',\n icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png'\n rotate: 180,\n iconWidth: '20px',\n iconHeight: '20px',\n };\n}\n</code></pre><h2>Collapse Prop</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>当前展开面板的 name</td><td>手风琴模式：string | number<br>非手风琴模式：(string | number)[]</td><td>-</td></tr><tr><td>accordion</td><td>是否开启手风琴模式</td><td>boolean</td><td>false</td></tr><tr><td>border</td><td>是否显示外边框</td><td>boolean</td><td>true</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>切换面板时触发</td><td>类型与 v-model 绑定的值一致</td></tr></tbody></table><h3>CollapseItem Props</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>name</td><td>唯一标识符，必填</td><td>string \\ number</td><td>-1</td></tr><tr><td>expand-icon-position</td><td>标题图标的位置</td><td>string</td><td>right</td></tr><tr><td>title-icon</td><td>标题图标链接</td><td>string</td><td>‘’ 为不展示图标，默认 ‘’</td></tr><tr><td>title-icon-width</td><td>标题图标宽度</td><td>string</td><td>13px</td></tr><tr><td>title-icon-height</td><td>标题图标高度</td><td>string</td><td>13px</td></tr><tr><td>title-icon-position</td><td>标题图标位置</td><td>string</td><td>‘left’ ‘right’</td></tr><tr><td>sub-title</td><td>标题栏副标题</td><td>string</td><td>-</td></tr><tr><td>icon</td><td>标题栏自定义图标链接</td><td>string</td><td>‘none’ 为不展示图标，默认 ‘’</td></tr><tr><td>icon-width</td><td>标题栏自定义图标宽度</td><td>string</td><td>24px</td></tr><tr><td>icon-height</td><td>标题栏自定义图标高度</td><td>string</td><td>12px</td></tr><tr><td>rotate</td><td>点击折叠和展开的旋转角度,在自定义图标模式下生效</td><td>string \\ number</td><td>180</td></tr></tbody></table>',19),l={expose:[],setup:d=>(d,l)=>(e(),t("div",o,[n]))};export default l;
|
