init

src/component/collapse/index.less

@@ -0,0 +1,40 @@
+.layui-collapse {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 2px;
+}
+
+.layui-colla-content,
+.layui-colla-item {
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+
+.layui-colla-item:first-child {
+  border-top: none;
+}
+
+.layui-colla-title {
+  position: relative;
+  height: 42px;
+  line-height: 42px;
+  padding: 0 15px 0 35px;
+  color: #333;
+  background-color: var(--global-neutral-color-1);
+  cursor: pointer;
+  font-size: 14px;
+  overflow: hidden;
+}
+
+.layui-colla-content {
+  padding: 10px 15px;
+  line-height: 1.6;
+  color: #666;
+}
+
+.layui-colla-icon {
+  left: 15px;
+  top: 0;
+  font-size: 14px;
+  position: absolute;
+}

src/component/collapse/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/collapse/index.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+export default {
+  name: "LayCollapse",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { withDefaults, provide, ref, watch } from "vue";
+
+export interface CollapseProps {
+  accordion?: boolean;
+  modelValue?: number | string | number[] | string[];
+  collapseTransition?: boolean;
+}
+
+const props = withDefaults(defineProps<CollapseProps>(), {
+  modelValue: () => [],
+  accordion: false,
+  collapseTransition: true,
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    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,
+  collapseTransition: props.collapseTransition,
+  activeValues,
+  emit,
+});
+</script>
+
+<template>
+  <div class="layui-collapse">
+    <slot></slot>
+  </div>
+</template>