@@ -28,7 +52,6 @@ import { defineComponent, ref } from 'vue'
export default defineComponent({
name: "accordion",
setup() {
- const flag = ref(false)
const restrictOneOpen = ref(false)
const accordionTypeEmbed = ref(false)
const menu = ref([{
@@ -69,21 +92,35 @@ export default defineComponent({
]
}])
- const changV = (value) => {
- console.log('v',value)
- flag.value = value
+ const itemClick = (event) => {
+ console.log('item click' + JSON.stringify(event));
+ }
+ const menuToggle = (event) => {
+ console.log('menu toggle' + JSON.stringify(event));
+ if (event.open && event.item.needLoadChildren) {
+ event.item.loading = true;
+ setTimeout(() => {
+ event.item.children = [
+ {title: 'Child Content 1'},
+ {title: 'Child Content 2'}
+ ];
+ event.item.needLoadChildren = false;
+ event.item.loading = false;
+ }, 2000);
+ }
}
-
return {
menu,
restrictOneOpen,
accordionTypeEmbed,
+ itemClick,
+ menuToggle
}
}
})
-
+```
+
+
+:::
+
+
+### 使用模板
+可展开菜单和可点击菜单分别使用模板。可展开菜单指定menuItemTemplate，可点击菜单指定itemTemplate。没有数据模板指定noContentTemplate，并可以通过showNoContent控制无数据的时候不展开。 加载中模板指定loadingTemplate，通过item的loadingKey对应的属性值控制是否显示加载中。
+
+:::demo
+
+
+```vue
+
+
+
+
+
+```
+
+:::
+
+
+内部列表通过制定innerListTemplate使用模板。
+
+:::demo
+
+```vue
+
+
+
+
+
+```
+
+:::
+
+### 复合层级和自动展开
+支持多层级和不限制嵌套层级。可以独立使用autoOpenActiveMenu使得激活的菜单的父层级自动展开。
+:::demo
+
+```vue
+
+
+
+
+ auto expend active menu
+
+
+
+
+```
+
+:::
+
+### 改变键值
+通过titleKey,childrenKey,disabledKey,activeKey等等改变数组键值，适配不同的接口类型定义。
+:::demo
+
+```vue
+
+
+
+
+
```
\ No newline at end of file