136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<!-- components/collapse-panel.vue -->
|
||
<template>
|
||
<view class="collapse-panel">
|
||
<view
|
||
class="collapse-header"
|
||
@click="toggleCollapse"
|
||
>
|
||
<view class="title">
|
||
<uni-icons type="gear-filled" size="18" color="white" />
|
||
<text>{{ title }}</text>
|
||
</view>
|
||
<view
|
||
class="arrow"
|
||
:class="{ 'arrow-open': isOpen }"
|
||
>
|
||
<uni-icons type="arrowright" size="18" color="white" />
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="collapse-content"
|
||
:style="contentStyle"
|
||
>
|
||
<slot /> <!-- 插槽保留，支持自定义内容 -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// Vue 2 无需导入 Vue 核心API（如ref/computed），直接使用选项式API
|
||
export default {
|
||
// 1. 定义组件接收的props（替代 Vue3 的 defineProps）
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
required: true, // 标题为必填项
|
||
default: "" // 兜底默认值（避免无值时异常）
|
||
},
|
||
duration: {
|
||
type: Number,
|
||
default: 300 // 动画时长默认300ms
|
||
},
|
||
isBorder: {
|
||
type: Boolean,
|
||
default: true // 默认显示边框
|
||
}
|
||
},
|
||
// 2. 响应式数据（替代 Vue3 的 ref）
|
||
data() {
|
||
return {
|
||
isOpen: false, // 控制折叠/展开状态
|
||
contentHeight: 0 // 内容高度（原代码未实际使用，保留以备扩展）
|
||
};
|
||
},
|
||
// 3. 计算属性（替代 Vue3 的 computed 函数）
|
||
computed: {
|
||
// 动态计算内容区域样式（控制展开/折叠动画）
|
||
contentStyle() {
|
||
return {
|
||
"max-height": this.isOpen ? "1000px" : "0", // 展开时最大高度1000px（足够容纳多数内容）
|
||
"transition": `all ${this.duration}ms ease`, // 动画过渡：时长从props获取
|
||
"opacity": this.isOpen ? 1 : 0 // 展开时不透明，折叠时透明
|
||
};
|
||
}
|
||
},
|
||
// 4. 方法定义（替代 Vue3 的直接函数定义）
|
||
methods: {
|
||
// 切换折叠/展开状态
|
||
toggleCollapse() {
|
||
this.isOpen = !this.isOpen;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.collapse-panel {
|
||
margin: 16rpx 0;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
border: 1rpx solid #eee;
|
||
|
||
// 头部样式（点击区域）
|
||
.collapse-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
background-color: #1a73e8;
|
||
color: white;
|
||
transition: background-color 0.2s;
|
||
|
||
// 点击反馈（:active状态）
|
||
&:active {
|
||
background-color: #f1f3f5;
|
||
}
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx; // 图标与文字间距（原代码未显式设置，补充后排版更整齐）
|
||
}
|
||
|
||
// 箭头样式（旋转动画）
|
||
.arrow {
|
||
transition: transform 0.3s ease;
|
||
color: white;
|
||
|
||
// 展开时箭头旋转90度
|
||
&-open {
|
||
transform: rotate(90deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 内容区域样式
|
||
.collapse-content {
|
||
overflow: hidden;
|
||
padding: 0 24rpx;
|
||
background-color: #fff;
|
||
// 原代码中过渡类（.content-enter-active等）未关联<transition>组件，保留以备后续扩展
|
||
&-enter-active,
|
||
&-leave-active {
|
||
transition: all 0.3s ease;
|
||
}
|
||
&-enter-from,
|
||
&-leave-to {
|
||
opacity: 0;
|
||
max-height: 0;
|
||
}
|
||
}
|
||
}
|
||
</style> |