You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
954 B
55 lines
954 B
<template>
|
|
<view class="content" v-show="value">
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
watch: {
|
|
value: {
|
|
// 数据发生变化就会调用这个函数
|
|
handler(newVal, oldVal) {
|
|
this.$nextTick(async()=>{
|
|
console.log(await this.size())
|
|
})
|
|
},
|
|
// 立即处理 进入页面就触发
|
|
// immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
async size() {
|
|
let res = await this.query(".content", this)
|
|
return res.height
|
|
},
|
|
query(selector, that) {
|
|
return new Promise(resolve => {
|
|
let query = uni.createSelectorQuery()
|
|
.in(that)
|
|
.select(selector);
|
|
query.boundingClientRect(res => {
|
|
resolve(res)
|
|
}).exec();
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height .5s linear;
|
|
&.close{
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|