first commit

target/classes/static/components/plugins/sysRichTextView/index.vue

@@ -0,0 +1,64 @@
+<script>
+module.exports = {
+    name: "index",
+    props: {
+        value: String,
+        /*最大高度，超过该高度显示折叠展开*/
+        height: Number
+    },
+    data() {
+        return {
+            isExpanded: false
+        }
+    },
+    methods: {
+        onView(e) {
+            if (e.target.tagName === "IMG") {
+                vant && vant.ImagePreview([e.target.src])
+            }
+        },
+        toggleDetails() {
+            this.isExpanded = !this.isExpanded
+        }
+    }
+}
+</script>
+
+<template>
+    <div>
+        <div class="content" v-html="value" v-if="value" @click="onView" :style="{ maxHeight: isExpanded ? 'none' : height + 'px' }"></div>
+        <div v-if="value && height" class="toggle-button" @click="toggleDetails">
+            {{ isExpanded ? "收起" : "查看全部详情" }}
+            <van-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'"></van-icon>
+        </div>
+        <van-empty v-if="!value" description="没有更多了"></van-empty>
+    </div>
+</template>
+
+<style scoped>
+.content {
+    padding: 10px;
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow: hidden;
+    word-break: break-word;
+    display: block;
+    box-sizing: border-box;
+    background: #fff;
+    transition: max-height 0.3s ease;
+}
+
+.content img {
+    width: 100% !important;
+}
+
+.toggle-button {
+    cursor: pointer;
+    text-align: center;
+    margin: 10px 0;
+    font-size: 14px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    color: rgb(119 115 115);
+}
+</style>