fs-uni-template/components/fs-collapse/fs-collapse.vue

<template>
	<view class="fs-collapse"><slot></slot></view>
</template>

<script>
/**
 * 折叠面板组件
 * @description 折叠面板组件
 * @property {Boolean} accordion 手风琴效果
 * @property {Number, String} active 激活项name
 * @property {String} position 箭头位置
 * @property {Number, String} rotate 旋转
 * @property {String} activeColor 高亮颜色
 * @property {String} activeType 高亮颜色类型
 * @property {Boolean} allOpen 是否全部展开
 * @property {Boolean} border 是否显示边框
 * @event {Function} change change事件
 */
export default {
	name: 'fs-collapse'
}
</script>

<script setup>
import { computed, provide, watch, reactive, onMounted, getCurrentInstance } from 'vue'

const props = defineProps({
	accordion: Boolean,
	active: {
		type: [Number, String],
		default: '0'
	},
	position: {
		type: String,
		default: 'right',
		validator(value) {
			return ['left', 'right'].includes(value)
		}
	},
	rotate: {
		type: [Number, String],
		default: 90
	},
	activeType: String,
	activeColor: String,
	allOpen: Boolean,
	border: {
		type: Boolean,
		default: true
	}
})
const emits = defineEmits(['change'])
const emitEvent = name => {
	setActive(name)
	emits('change', name)
}

const children = reactive([])
const setActive = name => {
	children.forEach(item => {
		if (props.accordion) {
			item.setActive(name === item.name ? !item.open : false)
		} else {
			if (name === item.name) {
				item.setActive(!item.open)
			}
		}
	})
}
provide(
	'collapse',
	reactive({
		...props,
		children,
		emitEvent
	})
)
watch(
	() => props.active,
	value => {
		setActive(value)
	}
)

defineExpose({
	children
})
</script>

<style lang="scss" scoped>
.fs-collapse {
	// background-color: #fff;
}
</style>