|
@@ -0,0 +1,38 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+interface IProps {
|
|
|
+ name?: string
|
|
|
+}
|
|
|
+withDefaults(defineProps<IProps>(), {
|
|
|
+ name: '',
|
|
|
+})
|
|
|
+const isCollapsed = ref(true)
|
|
|
+
|
|
|
+function changeIsCollapsed() {
|
|
|
+ isCollapsed.value = !isCollapsed.value
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="group">
|
|
|
+ <view class="group-head flex justify-between" @click="changeIsCollapsed">
|
|
|
+ <view class="head-left flex items-center px-[24rpx] py-1 bg-white">
|
|
|
+ <wd-icon name="caret-right-small" size="30px" color="#888" v-if="isCollapsed"></wd-icon>
|
|
|
+ <wd-icon name="caret-down-small" size="30px" color="#888" v-else></wd-icon>
|
|
|
+ <view class="group-name">{{ name }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="head-right">
|
|
|
+ <slot name="head-right"></slot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="group-content" v-if="!isCollapsed">
|
|
|
+ <slot></slot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.head-left {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+</style>
|