93 lines
2.0 KiB
Vue
93 lines
2.0 KiB
Vue
<template>
|
|
<div class="click-show-more bfff">
|
|
<div :style="csmStyle" id="click-show-more" class="content">
|
|
<slot></slot>
|
|
</div>
|
|
<view @click="toggleContent" class="bfff p25 df aic jcc">
|
|
<text class="f24 c999">{{ buttonText }}</text>
|
|
<uni-icons :class="[{ cStyle: isExpanded }, 'icons']" type="down" :size="16" />
|
|
</view>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
const props = defineProps({
|
|
// 需要预留的高度
|
|
reserveHeight: {
|
|
type: Number,
|
|
default: 40
|
|
},
|
|
// 默认展开
|
|
defaultExpanded: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 默认展开
|
|
buttonText: {
|
|
type: String,
|
|
default: '展开'
|
|
}
|
|
});
|
|
// 定义展开状态
|
|
const isExpanded = ref(false);
|
|
const buttonText = ref(isExpanded.value ? '收起' : '查看更多订单信息');
|
|
// 元素的高
|
|
const csmH = ref(null)
|
|
// 需要被响应的元素的样式
|
|
const csmStyle = ref({})
|
|
|
|
const toggleContent = () => {
|
|
if (isExpanded.value) {
|
|
buttonText.value = '查看更多订单信息';
|
|
csmStyle.value = {
|
|
'height': `${props.reserveHeight}px`
|
|
}
|
|
isExpanded.value = false;
|
|
} else {
|
|
buttonText.value = '收起';
|
|
csmStyle.value = {
|
|
'height': csmH.value + 'px'
|
|
}
|
|
isExpanded.value = true;
|
|
}
|
|
};
|
|
|
|
|
|
const getCsm = () => {
|
|
uni.createSelectorQuery().select('#click-show-more').boundingClientRect((rect) => {
|
|
console.log('元素高度：', rect.height);
|
|
csmH.value = rect.height
|
|
csmStyle.value = {
|
|
'height': `${props.reserveHeight}px`
|
|
}
|
|
}).exec();
|
|
}
|
|
onMounted(() => {
|
|
getCsm();
|
|
})
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.show-more-container {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content {
|
|
transition: height .5s ease-in-out;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.icons {
|
|
transition: transform 0.5s ease-in-out;
|
|
}
|
|
|
|
.cStyle {
|
|
transform: rotate(-180deg);
|
|
}
|
|
</style> |