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>
|