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.
62 lines
1.9 KiB
62 lines
1.9 KiB
<template name="graceSpread">
|
|
<view class="gui-spread"
|
|
:class="[isShrink ? 'gui-transition-all' : '']"
|
|
:style="{height:reHeight}">
|
|
<view :style="{paddingBottom: !isBtn && isShrink ? '80rpx' : '0rpx'}">
|
|
<slot></slot>
|
|
</view>
|
|
<text v-if="isBtn" @tap="spreadContent"
|
|
:style="{color:btnColor, fontSize:btnTxtSize, zIndex:zIndex, width:width}"
|
|
class="gui-icons gui-block-text gui-spread-btn"> {{btnTxt}}</text>
|
|
|
|
<text v-if="!isBtn && isShrink" @tap="shrinkContent"
|
|
:style="{color:btnColor, fontSize:btnTxtSize, zIndex:zIndex, width:width}"
|
|
class="gui-icons gui-block-text gui-spread-btn"> {{shrinkBtnTxt}}</text>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name : "gui-spread",
|
|
props : {
|
|
width : { type : String, default : "690rpx" },
|
|
height : { type : String, default : "600rpx" },
|
|
btnTxt : { type : String, default : "展开阅读全文" },
|
|
btnColor : { type : String, default : "#999999" },
|
|
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:function(){
|
|
this.reHeight = this.height;
|
|
},
|
|
methods: {
|
|
spreadContent : function () {
|
|
// #ifdef MP-BAIDU
|
|
this.reHeight = '';
|
|
// #endif
|
|
// #ifndef MP-BAIDU
|
|
this.reHeight = 'auto';
|
|
// #endif
|
|
// #ifdef APP-NVUE
|
|
this.reHeight = '';
|
|
// #endif
|
|
this.isBtn = false;
|
|
},
|
|
shrinkContent : function () {
|
|
this.reHeight = this.height;
|
|
this.isBtn = true;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gui-spread{overflow:hidden; position:relative;}
|
|
.gui-spread-btn{height:80rpx; line-height:80rpx; background-color:rgba(255,255,255,0.9); position:absolute; z-index:999999; left:0; bottom:0; text-align:center;}
|
|
</style>
|