组件

src/views/knowledge/knowledge/components/KnowledgeContent.vue

@@ -0,0 +1,96 @@
+<script setup lang='ts'>
+import { onScroll, scrollTo, formatDate } from '@/api/knowledge/scroll'
+
+
+
+
+const props = defineProps({
+    isShow: {
+        type: Boolean,
+        default: false
+    },
+    contentSource: {
+        type: Object
+    },
+});
+const emits = defineEmits(["update:isShow"]);		//操作父级数据
+
+/**
+ * 弹窗显示控制
+ */
+const boxShow = computed({
+    get: () => props.isShow,
+    set: (val) => {
+
+        emits("update:isShow", val);
+    },
+});
+
+
+const pdfIframeShow = ref<boolean>(false)
+
+/**
+ * 监听数据
+ */
+watch(() => props.isShow, () => {
+
+    if (props.isShow) {
+
+        if (props.contentSource?.gTestUrl === "" || props.contentSource?.gTestUrl == null) {
+            //文件是pdf    
+            pdfIframeShow.value = false
+
+        } else {
+            pdfIframeShow.value = true
+        }
+        console.log(pdfIframeShow.value)
+    }
+})
+onMounted(() => {
+    /*   const gTestUrl = props.contentSource?.gTestUrl;
+      const gContent = props.contentSource?.gContent; */
+
+});
+
+
+</script>
+
+<template>
+    <el-dialog v-model="boxShow" class="dialogStyle" :show-close="true">
+        <template #header="{ close, titleId, titleClass }">
+            <div class="my-header">
+                <h4 :id="titleId" :class="titleClass" style="margin-top: 5px;">{{ props.contentSource?.gTitle }}</h4>
+                <!-- <h4 :id="titleId" :class="titleClass" style="margin-top: 5px;">{{ props.contentSource?.gContent }}</h4> -->
+            </div>
+        </template>
+        <div style="padding-bottom: 20px;"><span>{{ formatDate(props.contentSource?.gAddTime) }}</span></div>
+        <iframe v-if="pdfIframeShow" :src="props.contentSource?.gTestUrl" frameborder="0"
+            style=" z-index: 1000;height: 680px;width: 850px"></iframe>
+        <div v-html="props.contentSource?.gContent" style="height: auto;width: auto;"></div>
+
+        <h5>评论区</h5>
+    </el-dialog>
+</template>
+    
+
+    
+<style>
+.dialogStyle {
+    top:-9.9%;
+    height: auto;
+    width: auto;
+    max-width: 1000px;
+    
+}
+
+.my-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.el-dialog__body {
+    margin-top: 0% !important;
+    padding-top: 0% !important;
+}
+</style>