158 lines
3.4 KiB
Vue
158 lines
3.4 KiB
Vue
<template>
|
||
<view class="collapse-box" :class="{boxShadow:boxShadow,borderRadius:borderRadius}">
|
||
<view class="title" :class="{border: border}"
|
||
:style="{backgroundColor: !disabled&&isShow?activebg:'',fontSize:fontSize+'rpx',height:height+'rpx',color:!disabled&&isShow?activeColor:''}"
|
||
@click="disabled?'':show()">
|
||
<slot name="title">
|
||
<text>{{title}}</text>
|
||
<image :src="rightIcon?rightIcon:require('./img/arrow-right.png')" class="right-icon" />
|
||
</slot>
|
||
</view>
|
||
<view class="content-box" :style="{height:isShow?contentHeight+'px':'0'}">
|
||
<view id="content" class="content">
|
||
<slot>{{content}}</slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* collapse 手风琴
|
||
* @property {String} title 面板标题
|
||
* @property {String} content 内容
|
||
* @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
|
||
* @property {Boolean} disabled 面板是否可以打开或收起（默认false）
|
||
* @property {String} activebg 面板打开时，标题的背景颜色（默认#fff）
|
||
* @property {String} fontSize 标题的文字大小，单位为rpx（默认28）
|
||
* @property {String} height 标题的高度，单位为rpx（默认90）
|
||
* @property {String} rightIcon 标题右侧图标（默认右箭头>）
|
||
* @property {Boolean} boxShadow 面板是否有阴影（默认false）
|
||
* @property {Boolean} borderRadius 面板是否有圆角（默认false）
|
||
* @property {String} activeColor 面板打开时标题的颜色（默认#333）
|
||
* @property {Boolean} border 标题是否显示下边框（默认true）
|
||
*/
|
||
export default {
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: "标题"
|
||
},
|
||
content: {
|
||
type: String,
|
||
default: "内容"
|
||
},
|
||
open: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
activebg: {
|
||
type: String,
|
||
default: "#fff"
|
||
},
|
||
fontSize: {
|
||
type: String,
|
||
default: "28"
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: "90"
|
||
},
|
||
rightIcon: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
boxShadow: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
borderRadius: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
activeColor: {
|
||
type: String,
|
||
default: "#333"
|
||
},
|
||
border: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isShow: this.open,
|
||
contentHeight: ''
|
||
};
|
||
},
|
||
created() {
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
methods: {
|
||
// 异步获取内容，或者动态修改了内容时，需要重新初始化
|
||
init() {
|
||
this.$nextTick(() => {
|
||
this.queryRect();
|
||
});
|
||
},
|
||
// 查询内容高度
|
||
queryRect() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select("#content").boundingClientRect(res => {
|
||
this.contentHeight = res.height;
|
||
}).exec()
|
||
},
|
||
show() {
|
||
this.isShow = !this.isShow
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.collapse-box {
|
||
|
||
}
|
||
|
||
.boxShadow {
|
||
box-shadow: 0 4rpx 6rpx rgba($color: #bbb, $alpha: 0.6);
|
||
}
|
||
|
||
.borderRadius {
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 24rpx;
|
||
transition: 0.4s all;
|
||
|
||
.right-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.border {
|
||
border-bottom: 2rpx solid #eee;
|
||
}
|
||
|
||
.content-box {
|
||
transition: 0.4s all;
|
||
overflow: hidden;
|
||
|
||
.content {
|
||
padding: 32rpx 24rpx;
|
||
}
|
||
}
|
||
|
||
</style>
|