62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
|
<!-- 展开与收缩 -->
|
|||
|
|
<template>
|
|||
|
|
<view class="result-box">
|
|||
|
|
<uni-icons type="smallcircle-filled" size="10" :color="color" style="margin-right:10rpx" v-if="title!== ''" />
|
|||
|
|
<text v-if="title!== ''">{{title}}：</text>
|
|||
|
|
<view :class="state?'uni-flex-text':'uni-flex'" style="font-weight: normal;">
|
|||
|
|
{{content}}
|
|||
|
|
</view>
|
|||
|
|
<view @click="expand" class="expand">{{state?'展开':'收缩'}}
|
|||
|
|
<uni-icons :type="state?'arrowdown':'arrowup'" size="10" color="#ffffff" style="margin:0 10rpx" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
title: [String],
|
|||
|
|
content: [String],
|
|||
|
|
color:{
|
|||
|
|
type:String,
|
|||
|
|
default:'#D49E46'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
state: true,
|
|||
|
|
cHeight: 0,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
// this.$nextTick(function(){
|
|||
|
|
// uni.createSelectorQuery().in(this).select('#content').boundingClientRect(data=>{
|
|||
|
|
// this.cHeight = data.height
|
|||
|
|
// }).exec()
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
expand() {
|
|||
|
|
this.state = !this.state;
|
|||
|
|
// this.$nextTick(function(){
|
|||
|
|
// uni.createSelectorQuery().in(this).select('#content').boundingClientRect(data=>{
|
|||
|
|
// this.cHeight = data.height
|
|||
|
|
// }).exec()
|
|||
|
|
// var animation = uni.createAnimation({
|
|||
|
|
// duration: 800,
|
|||
|
|
// timingFunction: 'ease',
|
|||
|
|
// delay: 0
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
// this.animation = animation.height(this.cHeight).step()
|
|||
|
|
// this.animationData = animation.export()
|
|||
|
|
// })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang='scss' scoped>
|
|||
|
|
@import "../../static/general.scss"
|
|||
|
|
</style>
|