import{e as a,o as t,G as n}from"./vendor.bd251973.js";const l={class:"markdown-body"},p=n(`

Collapse \u6298\u53E0\u9762\u677F

\u4ECB\u7ECD

\u5C06\u5185\u5BB9\u653E\u7F6E\u5728\u591A\u4E2A\u6298\u53E0\u9762\u677F\u4E2D\uFF0C\u70B9\u51FB\u9762\u677F\u6807\u9898\u53EF\u5C55\u5F00\u6216\u6536\u7F29\u5185\u5BB9\u3002

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { Collapse,CollapseItem } from '@nutui/nutui';
// taro
import { Collapse,CollapseItem } from '@nutui/nutui-taro';

const app = createApp();
app.use(Collapse);
app.use(CollapseItem);

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

\u901A\u8FC7v-model\u63A7\u5236\u5C55\u5F00\u7684\u9762\u677F\u5217\u8868\uFF0CactiveNames\u4E3A\u6570\u7EC4\u683C\u5F0F

<nut-collapse v-model:active="active1" icon="down-arrow">
  <nut-collapse-item :name="1">
    <template v-slot:mTitle>
      {{title1}}
    </template>
    NutUI\u662F\u4E00\u5957\u62E5\u6709\u4EAC\u4E1C\u98CE\u683C\u7684\u8F7B\u91CF\u7EA7\u7684 Vue \u7EC4\u4EF6\u5E93
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2">
    \u5728\u4EA7\u54C1\u7684\u529F\u80FD\u3001\u4F53\u9A8C\u3001\u6613\u7528\u6027\u548C\u7075\u6D3B\u6027\u7B49\u5404\u4E2A\u65B9\u9762\u505A\u4E86\u5168\u9762\u7684\u5347\u7EA7\uFF01
  </nut-collapse-item>
  <nut-collapse-item :title="title3" :name="3" disabled>
  </nut-collapse-item>
</nut-collapse>

setup() {
  const activeNames = reactive([1, 2]);
  const title = reactive({
    title1: '\u6807\u98981',
    title2: '\u6807\u98982',
    title3: '\u6807\u98983',
  })
  return {
    activeNames,
    ...toRefs(title)
  };
}

\u65E0icon\u6837\u5F0F

<nut-collapse v-model:active="activeName" :accordion="true">
  <nut-collapse-item :title="title1" :name="1">
   \u5F15\u5165Vue3\u65B0\u7279\u6027 Composition API\u3001Teleport\u3001Emits \u7B49
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2">
    \u5168\u9762\u4F7F\u7528 TypeScipt
  </nut-collapse-item>
</nut-collapse>

setup() {
  const activeName = ref(1);
  const title = reactive({
    title1: '\u6807\u98981',
    title2: '\u6807\u98982',
    title3: '\u6807\u98983',
  })
  return {
    activeName,
    ...toRefs(title)
  };
}

\u624B\u98CE\u7434

\u901A\u8FC7accordion\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u624B\u98CE\u7434\u6A21\u5F0F\uFF0C\u6700\u591A\u5C55\u5F00\u4E00\u4E2A\u9762\u677F\uFF0C\u6B64\u65F6activeName\u4E3A\u5B57\u7B26\u4E32\u683C\u5F0F\uFF1BsubTitle\u53EF\u4EE5\u8BBE\u7F6E\u526F\u6807\u9898\u7684\u5185\u5BB9

 <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
  <nut-collapse-item :title="title1" :name="1">
    \u57FA\u4E8E\u4EAC\u4E1C\u8BBE\u8BA1\u8BED\u8A00\u4F53\u7CFB\uFF0C\u6784\u5EFA\u573A\u666F
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
   \u63D0\u9AD8\u754C\u2FAF\u7684\u6A21\u5757\u5316\u901A\u7528\u7A0B\u5EA6
  </nut-collapse-item>
  <nut-collapse-item :title="title3" :name="3">
  \u91C7\u7528\u7EC4\u5408\u5F0F API Composition \u8BED\u6CD5\u91CD\u6784\uFF0C\u7ED3\u6784\u6E05\u6670\uFF0C\u529F\u80FD\u6A21\u5757\u5316
  </nut-collapse-item>
</nut-collapse>

setup() {
  const activeName = ref(1);
  const subTitle = '\u526F\u6807\u9898';
  const title = reactive({
    title1: '\u6807\u98981',
    title2: '\u6807\u98982',
    title3: '\u6807\u98983',
  })
  return {
    activeName,
    subTitle,
    ...toRefs(title)
  };
}

\u81EA\u5B9A\u4E49\u6298\u53E0\u56FE\u6807

\u901A\u8FC7icon\u8BBE\u7F6E\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0Crotate\u8BBE\u7F6E\u56FE\u6807\u65CB\u8F6C\u7684\u89D2\u5EA6

<nut-collapse
  v-model:active="activeName"
  :accordion="true"
  icon="arrow-right2"
  rotate="90"
>
  <nut-collapse-item :title="title1" :name="1">
    <template v-slot:sTitle>
      \u6587\u672C\u6D4B\u8BD5
    </template>
    NUTUI3.0\u91CD\u65B0\u601D\u8003\u5176\u5185\u5728\u7684\u4E00\u81F4\u6027\u548C\u53EF\u7EC4\u5408\u6027
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2" sub-title="\u6587\u672C\u5185\u5BB9">
    \u63D0\u2FBC\u4EA7\u7814\u8F93\u51FA\u5BF9\u63A5\u7684\u6548\u7387\uFF0C\u964D\u4F4E\u8F93\u51FA\u5DE5\u4F5C\u91CF
  </nut-collapse-item>
</nut-collapse>

const activeName = ref(1);
const title = reactive({
  title1: '\u6807\u98981',
  title2: '\u6807\u98982',
})
return {
  activeName,
  ...toRefs(title)
};

\u81EA\u5B9A\u4E49\u6807\u9898\u56FE\u6807

\u901A\u8FC7icon\u8BBE\u7F6E\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0Crotate\u8BBE\u7F6E\u56FE\u6807\u65CB\u8F6C\u7684\u89D2\u5EA6

<nut-collapse
  v-model:active="activeName"
  title-icon="issue"
  title-icon-color="red"
  title-icon-size="20px"
  title-icon-position="left"
  icon="down-arrow"
  :accordion="true"
>
  <nut-collapse-item :title="title1" :name="1">
  \u7EC4\u4EF6 emits \u4E8B\u4EF6\u5355\u72EC\u63D0\u53D6\uFF0C\u589E\u5F3A\u4EE3\u7801\u53EF\u8BFB\u6027
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2" sub-title="\u6587\u672C\u5185\u5BB9">
  \u4F7F\u7528 Teleport \u65B0\u7279\u6027\u91CD\u6784\u6302\u8F7D\u7C7B\u7EC4\u4EF6
  </nut-collapse-item>
</nut-collapse>

const activeName = ref(1);
const title = reactive({
  title1: '\u6807\u98981',
  title2: '\u6807\u98982',
})
return {
  activeName,
  ...toRefs(title)
};

Collapse Prop

\u5B57\u6BB5\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u5F53\u524D\u5C55\u5F00\u9762\u677F\u7684 name\u624B\u98CE\u7434\u6A21\u5F0F\uFF1Astring | number
\u975E\u624B\u98CE\u7434\u6A21\u5F0F\uFF1A(string | number)[]		-
accordion\u662F\u5426\u5F00\u542F\u624B\u98CE\u7434\u6A21\u5F0Fbooleanfalse
icon\u56FE\u6807\u94FE\u63A5/\u6216\u4F7F\u7528 NutUI \u7684 iconstring\u2018\u2019
icon-size\u56FE\u6807\u5927\u5C0Fstring16px
icon-color\u56FE\u6807\u989C\u8272string\u2018\u2019
title-icon\u6807\u9898\u56FE\u6807\u94FE\u63A5/\u6216\u4F7F\u7528 NutUI \u7684 iconstring\u2018\u2019
title-icon-size\u6807\u9898\u56FE\u6807\u5927\u5C0Fstring16px
title-icon-color\u6807\u9898\u56FE\u6807\u989C\u8272string\u2019\u2018
title-icon-position\u6807\u9898\u56FE\u6807\u4F4D\u7F6Estring\u2018left\u2019
rotate\u70B9\u51FB\u6298\u53E0\u548C\u5C55\u5F00\u7684\u65CB\u8F6C\u89D2\u5EA6,\u5728\u81EA\u5B9A\u4E49\u56FE\u6807\u6A21\u5F0F\u4E0B\u751F\u6548string \\ number180

CollapseItem Prop

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u552F\u4E00\u6807\u8BC6\u7B26\uFF0C\u5FC5\u586Bstring \\ number-1
title\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9\uFF0C\u652F\u6301\u63D2\u69FD\u4F20\u5165\uFF08props\u4F20\u5165\u7684\u4F18\u5148\u7EA7\u66F4\u9AD8\uFF09string-
sub-title\u6807\u9898\u680F\u526F\u6807\u9898\uFF0C\u652F\u6301\u63D2\u69FD\u4F20\u5165\uFF08props\u4F20\u5165\u7684\u4F18\u5148\u7EA7\u66F4\u9AD8\uFF09string-
disabled\u6807\u9898\u680F\u662F\u5426\u7981\u7528booleanfalse

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
change\u5207\u6362\u9762\u677F\u65F6\u89E6\u53D1\u7C7B\u578B\u4E0E v-model \u7ED1\u5B9A\u7684\u503C\u4E00\u81F4
`,31),e=[p],j={setup(c,{expose:s}){return s({frontmatter:{}}),(r,h)=>(t(),a("div",l,e))}};export{j as default};