You've already forked guangan-mp
46 lines
1.5 KiB
Vue
46 lines
1.5 KiB
Vue
<template>
|
|
<view class="overflow-hidden position-relative" :class="[isShrink ? 'gui-transition-all' : '']" :style="{height:reHeight}">
|
|
<view :style="{ paddingBottom: !isBtn && isShrink ? '80rpx' : '0rpx' }">
|
|
<slot></slot>
|
|
</view>
|
|
<text class="gui-spread-btn bg-white d-block opacity9" v-if="isBtn" @tap="spreadContent" :style="{fontSize:btnTxtSize, zIndex:zIndex, width:width}" > {{btnTxt}}</text>
|
|
<text class="gui-spread-btn bg-white d-block opacity9" v-if="!isBtn && isShrink" @tap="shrinkContent" :style="{fontSize:btnTxtSize, zIndex:zIndex, width:width}">{{shrinkBtnTxt}}</text>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name : "i-spread",
|
|
props : {
|
|
width : { type : String, default : "690rpx" },
|
|
height : { type : String, default : "600rpx" },
|
|
btnTxt : { type : String, default : "展开全文" },
|
|
btnTxtSize : { type : String, default : "28rpx" },
|
|
zIndex : { type : Number, default : 1 },
|
|
isShrink : { type : Boolean,default : false},
|
|
shrinkBtnTxt: { type : String, default : "收起"}
|
|
},
|
|
data() {
|
|
return {
|
|
reHeight: "600px",
|
|
isBtn : true
|
|
}
|
|
},
|
|
created(){
|
|
this.reHeight = this.height;
|
|
},
|
|
methods: {
|
|
spreadContent() {
|
|
this.reHeight = '';
|
|
this.isBtn = false;
|
|
},
|
|
shrinkContent () {
|
|
this.reHeight = this.height;
|
|
this.isBtn = true;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gui-spread-btn{height:91rpx; line-height:88rpx; position:absolute; z-index:999; left:0; bottom:-3rpx; text-align:center;font-size:28rpx;opacity:0.96;}
|
|
</style>
|