富文本卡片组件初步

pages/policy/policy_rich_card.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="card-situation">
+    <div class="card-title">{{ model.title }}</div>
+    <div
+      v-html="model.text"
+      class="card-text"
+      :class="{ isfold: isfold }"
+    ></div>
+    <div class="fold" v-if="isFold && localIsFold" @click="changeFoldState">
+      点击{{ foldText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["model", "isFold"],
+  data() {
+    return {
+      isfold: false,
+      height: 0,
+      foldText: "展开",
+      scrollTop: 0,
+      localIsFold: true,
+    };
+  },
+  mounted() {
+    let query = uni.createSelectorQuery().in(this);
+    let cardText = query.select(".card-text");
+    cardText
+      .boundingClientRect((res) => {
+        this.height = res.height;
+      })
+      .exec(() => {
+        if (this.height < 500) {
+          this.localIsFold = false;
+        } else {
+          this.isfold = true;
+        }
+      });
+  },
+  watch: {
+    isfold(newValue, oldValue) {
+      if (newValue) {
+        this.foldText = "展开";
+      } else {
+        this.foldText = "收起";
+      }
+    },
+  },
+  methods: {
+    changeFoldState() {
+      let poor = 0,
+        Bheight = 0,
+        Eheight = 0;
+      let query = uni.createSelectorQuery().in(this);
+      let con = query.select(".card-situation");
+      con
+        .fields({ size: true }, (e) => {
+          Bheight = e.height;
+        })
+        .exec(() => {
+          console.log("开始高度", Bheight);
+        });
+      this.isfold = !this.isfold;
+      con
+        .fields({ size: true }, (e) => {
+          Eheight = e.height;
+        })
+        .exec(() => {
+          // this.$emit("changeScroll", Bheight - Eheight);
+          console.log("结束高度", Eheight);
+        });
+           this.$emit("changeScroll");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.card-situation {
+  margin-top: 20rpx;
+  padding: 20rpx;
+  border-top: 8rpx solid #f2f2f2;
+  box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
+  border-radius: 32rpx;
+  .card-title {
+    font-weight: 600;
+    padding: 20rpx 20rpx 0rpx 20rpx;
+  }
+  .card-text {
+    padding: 20rpx;
+    margin-top: 20rpx;
+    font-size: 27rpx;
+    letter-spacing: 1rpx;
+    line-height: 50rpx;
+    overflow: hidden;
+  }
+  .fold {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: $uni-color-primary;
+  }
+}
+.isfold {
+  max-height: 340rpx;
+}
+</style>