1.0.0

components/i-spread/i-spread.vue

@@ -0,0 +1,45 @@
+<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>