<template>
|
<view class="">
|
<view class="content" @click="onClick()">
|
<view class="">
|
<view class="">
|
<view class="" v-if="$slots.title">
|
<template slot="title">
|
<slot name="title"></slot>
|
</template>
|
</view>
|
<view class="flex_btw" v-else>
|
<view class="title">{{title}}</view>
|
<view class='icon' :style="[{transform:isOpen? iconRotate : ''}]">
|
<u-icon name="arrow-down" color="#999" size="28rpx"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view class="mtb26">
|
<view class="cut_line" v-if="isBorder || isBorder==undefined"></view>
|
</view>
|
<view class="v-collapse" :style="[{ height: isOpen ? collapseHeight + 'px' : '0' }]"
|
@click.stop="clickContent()">
|
<view class="u-collapse-content" id="ida">
|
<view class="" v-if="$slots.cont">
|
<template slot="cont">
|
<slot name="cont"></slot>
|
</template>
|
</view>
|
<view class="ml80 cont" v-else>
|
<view class="">{{content}}</view>
|
</view>
|
<view class="mtb26">
|
<view class="cut_line" v-if="isBorder || isBorder==undefined"></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
/*
|
* zh-collapse 折叠面板
|
* @property {String} title 面板标题
|
* @property {String} content 面板展开内容
|
*/
|
export default {
|
props: {
|
title: {
|
typeOf: String,
|
default: ''
|
},
|
content: {
|
typeOf: String,
|
default: ''
|
},
|
},
|
components: {},
|
data() {
|
return {
|
isOpen: false, //是否展开面板
|
isBorder: true, //是否显示边框
|
iconRotate: '', //旋转右侧图标
|
collapseHeight: 0, //获取展开高度
|
}
|
},
|
created() {
|
this.collapse = this.getCollapse()
|
|
},
|
mounted() {
|
if (!this.collapse) return
|
if (this.collapse.childrens.indexOf(this) === -1) {
|
this.collapse.childrens.push(this)
|
}
|
|
this.$nextTick(() => {
|
this.collapse.childrens.forEach((item, index) => {
|
// console.log(index,item);
|
if (item.isOpen) {
|
this.iconRotate = 'rotate(180deg)'
|
this.collapse.onChange()
|
this.queryRect();
|
}
|
})
|
})
|
},
|
methods: {
|
onClick() { //点击展开面板
|
this.isOpen = !this.isOpen
|
if (this.isOpen && this.collapse) {
|
this.collapse.setAccordion(this)
|
}
|
if (this.isOpen) {
|
this.iconRotate = 'rotate(180deg)'
|
} else {
|
this.iconRotate = ''
|
}
|
this.collapse.onChange()
|
this.queryRect();
|
},
|
|
queryRect(e) { // 查询内容高度
|
this.$uGetRect('#ida').then(res => {
|
this.collapseHeight = res.height;
|
})
|
},
|
$uGetRect(selector, all) { //获取布局节点高度
|
return new Promise(resolve => {
|
uni.createSelectorQuery().
|
in(this)[all ? 'selectAll' : 'select'](selector)
|
.boundingClientRect(rect => {
|
if (all && Array.isArray(rect) && rect.length) {
|
resolve(rect)
|
}
|
if (!all && rect) {
|
resolve(rect)
|
}
|
})
|
.exec()
|
})
|
},
|
toJSON() {},
|
|
/**
|
* 获取父元素实例
|
*/
|
getCollapse(name = 'zhCollapse') {
|
let parent = this.$parent;
|
let parentName = parent.$options.name;
|
while (parentName !== name) {
|
parent = parent.$parent;
|
if (!parent) return false;
|
parentName = parent.$options.name;
|
}
|
return parent;
|
},
|
clickContent() { //点击展开内容事件
|
let str = ''
|
this.collapse.childrens.forEach((item, index) => {
|
if (item === this) {
|
str = index
|
}
|
})
|
this.$emit('clickContent', str)
|
}
|
},
|
computed: {
|
|
},
|
watch: {}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
padding: 24upx 24upx 0 24upx;
|
background-color: #fff;
|
border: 12upx;
|
|
.title {
|
color: #666;
|
font-weight: 500;
|
font-size: 24upx;
|
}
|
|
.icon {
|
transition: all 0.4s;
|
}
|
|
.titlea {
|
color: #999;
|
font-size: 24upx;
|
}
|
|
.cont {
|
color: #909193;
|
font-size: 28upx;
|
}
|
|
}
|
|
.cut_line {
|
height: 1upx;
|
background: #EBEBEB;
|
}
|
|
.mtb24 {
|
margin: 24upx 0;
|
}
|
|
.mtb26 {
|
margin: 26upx 0;
|
}
|
|
.mtb30 {
|
margin: 30upx 0;
|
}
|
|
.ml80 {
|
margin-left: 80upx;
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.flex1 {
|
flex: 1;
|
}
|
|
.flex_btw {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.v-collapse {
|
height: 0rpx;
|
overflow: hidden;
|
transition: all 0.4s;
|
|
.u-collapse-content {
|
overflow: hidden;
|
}
|
}
|
</style>
|
