可视化话题详情组件2

src/views/components/foldText.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="m-fold_text" :class="initOk ? '' : 'z-init'">
+    <div
+      id="cnt"
+      ref="foldSlot"
+      class="fold_text-cnt"
+      :class="isFolded ? 'z-fold-' + row : ''"
+    >
+      <slot></slot>
+    </div>
+    <div v-if="!noNeedFold" class="fold_text-btn" @click="shiftFold">
+      {{ isFolded ? "展开" : "收起" }}
+    </div>
+  </div>
+</template>
+
+<script>
+import nextTick from "dai-js/tools/nextTick";
+
+export default {
+  name: "ResiSearch",
+  props: {
+    row: {
+      type: Number,
+      default: 2,
+    },
+    lineHeight: {
+      type: Number,
+      default: 24,
+    },
+  },
+  data() {
+    return {
+      initOk: false,
+
+      isFolded: false,
+
+      noNeedFold: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      await nextTick();
+
+      const height = await this.$refs.foldSlot.offsetHeight;
+      const { row, lineHeight } = this;
+
+      let noNeedFold = height / row < lineHeight;
+
+      this.noNeedFold = noNeedFold;
+      this.isFolded = !noNeedFold;
+      this.initOk = true;
+    },
+
+    shiftFold() {
+      let { isFolded } = this;
+      this.isFolded = !isFolded;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+// 清除容器自身浮动
+@mixin cs {
+  &::after {
+    display: block;
+    visibility: hidden;
+    clear: both;
+    overflow: hidden;
+    height: 0;
+    content: "";
+  }
+}
+
+// 不换行显示省略号
+@mixin toe {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-wrap: normal;
+}
+
+// 强制文本换行 多行
+@mixin toeM($num) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+}
+
+.m-fold_text {
+  @include cs;
+
+  &.z-init {
+    background-color: rgba(#000, 0.05);
+    > view {
+      visibility: hidden;
+    }
+  }
+
+  .fold_text-cnt {
+    &.z-fold-1 {
+      @include toe;
+    }
+    &.z-fold-2 {
+      @include toeM(2);
+    }
+    &.z-fold-3 {
+      @include toeM(3);
+    }
+    &.z-fold-4 {
+      @include toeM(4);
+    }
+    &.z-fold-5 {
+      @include toeM(5);
+    }
+  }
+
+  .fold_text-btn {
+    float: right;
+    margin-right: -4px;
+    padding: 0 5px;
+    line-height: 20px;
+    color: #0c81fe;
+    cursor: pointer;
+  }
+}
+</style>

src/views/modules/visual/basicinfo/cpts/incident-info.vue

@@ -118,19 +118,19 @@
                 </div>
                 <div class="info-prop" v-if="projectCate.length > 0">
                   <span>分类：</span>
-                  <div>
+                  <fold-text :row="3">
                     <div :key="item.name" v-for="item in projectCate">
                       {{ item.name }}
                     </div>
-                  </div>
+                  </fold-text>
                 </div>
                 <div class="info-prop" v-if="projectTag.length > 0">
                   <span>标签：</span>
-                  <div>
+                  <fold-text :row="3">
                     <div :key="item.name" v-for="item in projectTag">
                       {{ item.name }}
                     </div>
-                  </div>
+                  </fold-text>
                 </div>
               </div>
 
@@ -212,6 +212,7 @@ import screenLoading from "@/views/modules/visual/cpts/loading";
 import { requestPost } from "@/js/dai/request";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import analyse from "@/views/modules/visual/cpts/analyse";
+import foldText from "@/views/components/foldText";
 import dateFormat from "dai-js/tools/dateFormat";
 
 function iniData() {
@@ -338,6 +339,7 @@ export default {
     cptTb,
     analyse,
     screenLoading,
+    foldText,
   },
 
   data: iniData,
@@ -531,7 +533,7 @@ export default {
     },
 
     toProjectInfo(item) {
-      console.log(item)
+      console.log(item);
       this.resiEventId = item.resiEventId;
     },
   },

src/views/modules/visual/basicinfo/cpts/topic-info.vue

@@ -178,19 +178,19 @@
                 </div>
                 <div class="info-prop" v-if="projectCate.length > 0">
                   <span>分类：</span>
-                  <div>
+                  <fold-text :row="3">
                     <div :key="item.name" v-for="item in projectCate">
                       {{ item.name }}
                     </div>
-                  </div>
+                  </fold-text>
                 </div>
                 <div class="info-prop" v-if="projectTag.length > 0">
                   <span>标签：</span>
-                  <div>
+                  <fold-text :row="3">
                     <div :key="item.name" v-for="item in projectTag">
                       {{ item.name }}
                     </div>
-                  </div>
+                  </fold-text>
                 </div>
               </div>
 
@@ -273,6 +273,7 @@ import { requestPost } from "@/js/dai/request";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import lineChart from "@/views/modules/visual/cpts/line-chart";
 import analyse from "@/views/modules/visual/cpts/analyse";
+import foldText from "@/views/components/foldText";
 import dateFormat from "dai-js/tools/dateFormat";
 
 function iniData() {
@@ -425,6 +426,7 @@ export default {
     analyse,
     screenLoading,
     lineChart,
+    foldText,
   },
 
   data: iniData,