!4 [完善]折叠面板(原手风琴)

Merge pull request !4 from 须弥/develop

example/docs/zh-CN/components/collapse.md

@@ -4,7 +4,7 @@
 ::: demo
 
 <template>
-  <lay-collapse :openKeys="openKeys">
+  <lay-collapse v-model="openKeys">
     <lay-collapse-item title="标题" id="1"> 内容 </lay-collapse-item>
     <lay-collapse-item title="标题" id="2"> 内容 </lay-collapse-item>
     <lay-collapse-item title="标题" id="3"> 内容 </lay-collapse-item>
@@ -28,14 +28,146 @@ export default {
 
 :::
 
+::: title 手风琴效果
+:::
+
+::: demo
+
+<template>
+  <lay-collapse v-model="openKeys2" accordion>
+    <lay-collapse-item title="标题1" id="1"> 内容1 </lay-collapse-item>
+    <lay-collapse-item title="标题2" id="2"> 内容2 </lay-collapse-item>
+    <lay-collapse-item title="标题3" id="3"> 内容3 </lay-collapse-item>
+  </lay-collapse>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const openKeys2 = ref("2")
+
+    return {
+      openKeys2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 禁用属性
+:::
+
+::: demo
+
+<template>
+  <lay-collapse v-model="openKeys3">
+    <lay-collapse-item title="标题" id="1" disabled> 内容 </lay-collapse-item>
+    <lay-collapse-item title="标题" id="2"> 内容 </lay-collapse-item>
+    <lay-collapse-item title="标题" id="3" disabled> 内容 </lay-collapse-item>
+  </lay-collapse>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const openKeys3 = ref(["1","2"])
+
+    return {
+      openKeys3
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 标题插槽
+:::
+
+::: demo
+
+<template>
+  <lay-collapse v-model="openKeys4">
+    <lay-collapse-item title="标题" id="1"> 
+      <template #title>自定义标题<i class="layui-icon layui-icon-heart-fill" style="color:red;"></i></template>
+      内容
+    </lay-collapse-item>
+    <lay-collapse-item title="标题" id="2"> 
+      <template v-slot:title="props">自定义标题{{props}}</template>
+      内容
+    </lay-collapse-item>
+    <lay-collapse-item title="标题" id="3"> 内容 </lay-collapse-item>
+  </lay-collapse>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const openKeys4 = ref(["1","2"])
+
+    return {
+      openKeys4
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 事件使用
+:::
+
+::: demo
+
+<template>
+  <lay-collapse v-model="emit1" @change="change">
+    <lay-collapse-item title="标题1" :id="1"> 内容1 </lay-collapse-item>
+    <lay-collapse-item title="标题2" :id="2"> 内容2 </lay-collapse-item>
+    <lay-collapse-item title="标题3" id="haha"> 内容3 </lay-collapse-item>
+  </lay-collapse>
+  <div style="color:#ff5722;">F12 打开调试工具 -> console 控制面板进行查看事件输出</div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const emit1 = ref([1, 2, "haha"])
+    
+    const change = function(id, isShow, activeValues){
+      console.log("change", id, isShow, activeValues);
+    }
+
+    return {
+      emit1
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Collapse 属性
 :::
 
 ::: table
 
-| Name     | Description | Accepted Values |
+| Name      | Description             | Accepted Values | Default Value   |
-| -------- | ----------- | --------------- |
+| --------- | ----------------------- | --------------- | --------------- | 
-| openKeys | 打开的目录  | `array`         |
+| openKeys  | 默认打开的折叠面板子项key | `string`/`array`| --              |
+| accordion | 是否开启手风琴效果        | `boolean`       |  `false`        |
 
 :::
 
@@ -44,9 +176,33 @@ export default {
 
 ::: table
 
-| Name  | Description | Accepted Values |
+| Name      | Description             | Accepted Values | Default Value   |
-| ----- | ----------- | --------------- |
+| --------- | ----------------------- | --------------- | --------------- | 
-| id    | 编号        | --              |
+| id        | 编号                    | `string`        |      --         |
-| title | 标题        | --              |
+| title     | 标题                    | `string`        |      --         |
+| disabled  | 是否禁用                | `boolean`       |  `false`        |
+
+:::
+
+::: title Collapse-item 插槽
+:::
+
+::: table
+
+| Name      | Description             | Params |
+| --------- | ----------------------- | --------------- | 
+| --        | 默认插槽 --> 内容        | `{props}`        |
+| title     | 标题插槽                 | `{props}`        |
+
+:::
+
+::: title 事件
+:::
+
+::: table
+
+| Name     | Description          | Callback Params  |
+| -------- | -------------------- | ---------------- |
+| change   | 折叠面板变化触发事件   | (`id`, `isShow`, activeValues)<br> <br> `id`: (`number` / `string`)对应当前操作面板的值 <br> <br> `isShow`: (`boolean`)`true` -> 展开, `false` -> 折叠 <br> <br> `activeValues`: (`Array`)当前状态为展开的面板值集合|
 
 :::

example/src/layouts/Layout.vue

@@ -193,7 +193,7 @@ export default {
       },
       {
         id: 21,
-        title: '手风琴',
+        title: '折叠面板',
         subTitle: 'collapse',
         path: '/zh-CN/components/collapse',
       },

example/src/router/zh-CN.ts

@@ -159,7 +159,7 @@ const zhCN = [
           {
             path: '/zh-CN/components/collapse',
             component: () => import('../../docs/zh-CN/components/collapse.md'),
-            meta: { title: '手风琴' },
+            meta: { title: '折叠面板' },
           },
           {
             path: '/zh-CN/components/table',

example/src/view/component.vue

@@ -250,7 +250,7 @@ export default {
           },
           {
             id: 21,
-            title: '手风琴',
+            title: '折叠面板',
             subTitle: 'collapse',
             path: '/zh-CN/components/collapse',
           },

src/module/collapse/index.vue

@@ -6,19 +6,34 @@
 
 <script setup name="LayCollapse"></script>
 <script setup lang="ts">
-import { withDefaults, defineProps, provide } from 'vue'
+import { withDefaults, defineProps, provide, ref, defineEmits, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    openKeys: string[]
+    modelValue?: number | string | [];
+    accordion?: boolean;
   }>(),
   {
-    openKeys: function () {
+    modelValue: () => [],
-      return []
+    accordion: false
-    },
   }
 )
 
-provide("openKeys",props.openKeys)
+// 监听传入的值
+watch(
+  () => props.modelValue, 
+  (val, oldVal)=>{
+    activeValues.value = ([] as any[]).concat(val)
+  }
+)
+const emit = defineEmits(["update:modelValue", "change"])
+
+const activeValues = ref<Array<any>>(([] as any[]).concat(props.modelValue));
+
+provide("layCollapse", {
+  accordion : props.accordion,
+  activeValues,
+  emit
+})
 
 </script>

src/module/collapseItem/index.vue

@@ -1,35 +1,50 @@
 <template>
   <div class="layui-colla-item">
-    <h2 class="layui-colla-title" @click="showHandle">
+    <h2 :class="['layui-colla-title', {'layui-disabled' : disabled}]" @click="showHandle">
-      {{ title
+      <slot name="title" :props="props">{{ title}}</slot>
-      }}<i class="layui-icon layui-colla-icon">{{ isShow ? '' : '' }}</i>
+      <i class="layui-icon layui-colla-icon">{{ isShow ? '' : '' }}</i>
     </h2>
     <div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
       <p>
-        <slot />
+        <slot :props="props"/>
       </p>
     </div>
   </div>
 </template>
 
 <script setup name="LayCollapseItem" lang="ts">
-import { defineProps, inject, ref } from 'vue'
+import { withDefaults, defineProps, inject, computed, ref } from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(
-  id: string
+  defineProps<{
-  title: string
+    id: number | string
-}>()
+    title: string
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false
+  }
+)
 
-const openKeys = inject('openKeys') as string[]
+const {accordion, activeValues, emit} = inject('layCollapse') as any
 
-const isShow = ref(openKeys.includes(props.id))
+let isShow = computed(()=>{return activeValues.value.includes(props.id)})
 
 const showHandle = function () {
-  isShow.value = !isShow.value
+  if (props.disabled) {
-  if (openKeys.indexOf(props.id) != -1) {
+    return ;
-    openKeys.splice(openKeys.indexOf(props.id), 1)
-  } else {
-    openKeys.push(props.id)
   }
+  const _isShow = isShow.value;
+  // 手风琴效果
+  if (accordion) {
+    activeValues.value = !_isShow ? [props.id] : [];
+  } else if (_isShow) { // 普通折叠面板 --> 折叠
+    activeValues.value.splice(activeValues.value.indexOf(props.id), 1)
+  } else { // 普通折叠面板 --> 展开
+    activeValues.value.push(props.id)
+  }
+
+  emit("update:modelValue", (accordion ? activeValues.value[0] || null : activeValues.value));
+  emit("change", props.id, !_isShow, activeValues.value);
 }
 </script>