<template>
|
<div class="app-collapse-form">
|
<div class="header">
|
<div class="title">
|
<div class="left" @click="onActive">
|
<div class="icon" :style="`transform: rotate(${active === '0' ?'180deg' : '0deg'})`"></div>
|
<span>{{ title }}</span>
|
</div>
|
<div class="button">
|
<slot name="header-button" v-bind="{selected}"/>
|
</div>
|
</div>
|
</div>
|
<el-collapse v-model="active">
|
<el-collapse-item name="0">
|
<slot/>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</template>
|
|
<script setup>
|
|
import {context} from '@/hooks';
|
|
const {useForceUpdate} = context;
|
|
const props = defineProps({
|
title: {
|
type: String,
|
default: ''
|
}
|
});
|
const active = ref('0');
|
|
const [$props, forceUpdate] = useForceUpdate(props);
|
|
const $forceUpdate = forceUpdate;
|
|
const onActive = () => {
|
active.value = active.value === '0' ? '' : '0'
|
}
|
|
|
const selected = ref({});
|
|
const setSelected = (val) => {
|
selected.value = val;
|
}
|
|
const getSelected = () => selected.value;
|
|
const assignSelected = (val) => {
|
selected.value = Object.assign(selected.value, val);
|
}
|
|
/**
|
* 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
|
*/
|
defineExpose({
|
$forceUpdate,
|
setSelected,
|
getSelected,
|
assignSelected
|
});
|
</script>
|
|
<style lang="scss">
|
.app-collapse-form {
|
|
> .el-collapse {
|
border: none;
|
|
.el-collapse-item__header {
|
display: none;
|
}
|
|
.el-collapse-item__content {
|
padding: 15px 0;
|
}
|
|
.el-collapse-item__wrap {
|
border: none;
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
|
.app-collapse-form {
|
|
.header {
|
position: relative;
|
|
.title {
|
position: relative;
|
display: flex;
|
align-items: center;
|
font-weight: 500;
|
font-size: 14px;
|
color: var(--el-text-color-primary);
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
width: 100%;
|
padding: 10px 0;
|
display: flex;
|
justify-content: space-between;
|
|
.left {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
}
|
|
.icon {
|
width: 4px;
|
height: 20px;
|
background-color: var(--el-color-primary);
|
border-radius: 4px;
|
}
|
|
.button {
|
}
|
}
|
|
.icon {
|
padding: 0.5px;
|
box-sizing: border-box;
|
border: 1px solid var(--el-color-info-light-3);
|
margin-right: 10px;
|
}
|
}
|
}
|
</style>
|
