预览

src/router/index.js

@@ -58,6 +58,10 @@ export const constantRoutes = [
     hidden: true,
   },
   {
+    path: "/newPageEditor",
+    component: () => import("@/views/XMHJC/column/newPageEditor.vue")
+  },
+  {
     path: "",
     component: Layout,
     redirect: "/index",

src/views/XMHJC/column/article.vue

@@ -143,6 +143,7 @@
       <template #footer>
         <el-button @click="dialogVisible = false" size="large">取 消</el-button>
         <el-button type="primary" v-no-double-click="submitForm" size="large" :loading="submitLoading">确 定</el-button>
+        <el-button type="primary" v-no-double-click="showNewPage" size="large" :loading="submitLoading">预 览</el-button>
       </template>
     </el-dialog>
   </div>
@@ -162,7 +163,7 @@ import {
   findMenuListByOpen, findSubMenuListByOpen,
   getColumnArticle
 } from "@/api/XMHJC/column";
-
+const router = useRouter();
 const loading = ref(false);
 const submitLoading = ref(false);
 const sourceList = ref({
@@ -478,6 +479,15 @@ const selection = ref({
 const select = (_selection, row) => {
   selection.value.data = _selection;
 };
+const showNewPage = () => {
+  console.log(formData.data);
+  localStorage.setItem('formData',JSON.stringify(formData.data) )
+  let routeData = router.resolve({
+      path:'/newPageEditor'
+    })
+  window.open(routeData.href, '_blank');
+    
+}
 const submitForm = () => {
   byform.value.handleSubmit(() => {
 

src/views/XMHJC/column/newPageEditor.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="indexMain">
+        <div>
+            <img :src="bannerImg" alt="">
+        </div>
+        <!-- 直接展示富文本 -->
+        <div style="width: 100%;" >
+            <div>
+                <div class="fwbtitle">{{ formData.title }}</div>
+                <div class="fwbtitle2">
+                    {{ formData.columnIdName }}
+                    {{ formData.time }}
+                </div>
+            </div>
+            
+            <div  v-html="formData.content" class="right">
+            
+            </div>
+        </div>
+        
+    </div>
+</template>
+
+<script setup>
+import { ref,onMounted, watch } from "vue";
+
+
+//定义路由
+import {useRouter,useRoute} from 'vue-router'
+const router=useRouter()
+const route=useRoute()
+
+
+
+
+const bannerImg = ref('')
+
+const formData = ref({
+    content:'',
+    columnIdName:'',
+    time:'',
+    title:'',
+})
+watch(
+  () => route.query,
+  async(routeQuery) => {
+    console.log('newRouterName222222222',routeQuery)
+    
+
+  }
+)
+
+
+onMounted(async() => {
+    
+    formData.value = JSON.parse(localStorage.getItem('formData')) 
+});
+
+
+</script>
+
+<style scoped>
+.indexMain{
+    width: 80vw;
+    margin: 0 auto;
+    padding: 20px;
+    display: flex;
+    background-color: #fff;
+    min-height: 300px;
+    overflow: auto;
+    min-width: 900px;
+    flex-direction: column;
+}
+.right{
+    margin-top: 20px;
+}
+.fwbtitle{
+    font-size: 28px;
+    text-align: left;
+    font-weight: bold;
+    /* height: 60px; */
+    line-height: 60px;
+}
+.fwbtitle2{
+    font-size: 16px;
+    text-align: left;
+    color: #ccc;
+    height: 40px;
+    line-height: 40px;
+}
+</style>