صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
WisdomCity-Web
/
huikaifa
3
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

feat: preview 预览运行

王家程 3 سال پیش
والد
f840f28600
کامیت
07bc9faa2d
8فایلهای تغییر یافته به همراه34 افزوده شده و 12 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 4 0
      public/index.html
  2. 3 3
      public/preview.html
  3. 1 1
      src/components/generator/html.js
  4. 2 2
      src/components/generator/table.js
  5. 2 2
      src/views/Page/Edit/index.vue
  6. 4 2
      src/views/components/previewCode.vue
  7. 12 2
      src/views/preview/main.js
  8. 6 0
      vue.config.js

+ 4 - 0
public/index.html
مشاهده فایل 

@@ -77,6 +77,10 @@
 
     }
 
   </style>
 
   <link href="https://lib.baomitu.com/monaco-editor/0.19.3/min/vs/editor/editor.main.css" rel="stylesheet">
 
+  <!-- <link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
 
+  <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
 
+  <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
 
+  <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script> -->
 
 
 <body>
 
   <noscript>

+ 3 - 3
public/preview.html
مشاهده فایل 

@@ -6,10 +6,10 @@
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <title>huikaifa-preview</title>
 
-    <link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
 
+    <!-- <link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
 
     <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
 
     <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
 
-    <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
 
+    <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script> -->
 
     <style>
 
       body{
 
         margin: 0;
 
@@ -30,7 +30,7 @@
 
   </head>
 
   <body>
 
     <noscript>
 
-      <strong>抱歉，javascript被禁用，请开启后重试。</strong>
 
+      <strong>抱歉，javascript被禁用，请开启后重试。2</strong>
 
     </noscript>
 
     <div id="previewApp"></div>
 
   </body>

+ 1 - 1
src/components/generator/html.js
مشاهده فایل 

@@ -33,7 +33,7 @@ function buildFormTemplate(scheme, child, type) {
 
     labelPosition = `label-position="${scheme.labelPosition}"`
 
   }
 
   const disabled = scheme.disabled ? `:disabled="${scheme.disabled}"` : ''
 
-  let str = `<el-form ref="${scheme.formRef}" :model="${scheme.formModel}" :rules="${scheme.formRules}" size="${scheme.size}" ${disabled} label-width="${scheme.labelWidth}px" ${labelPosition}>
 
+  let str = `<el-form ref="${scheme.formRef}" :inline="scheme.inline"  :model="${scheme.formModel}" :rules="${scheme.formRules}" size="${scheme.size}" ${disabled} label-width="${scheme.labelWidth}px" ${labelPosition}>
 
       ${child}
 
       ${buildFromBtns(scheme, type)}
 
     </el-form>`

+ 2 - 2
src/components/generator/table.js
مشاهده فایل 

@@ -2,7 +2,7 @@
 
  * @Author: WangJiaCheng
 
  * @Date: 2021-07-26 14:27:27
 
  * @LastEditors: WangJiaCheng
 
- * @LastEditTime: 2021-07-29 11:06:30
 
+ * @LastEditTime: 2021-07-30 10:50:13
 
  * @Description: table生成
 
  */
 
 import { exportDefault, titleCase, deepClone } from '@/utils/index'
 
@@ -11,7 +11,7 @@ export function buildTable(formData) {
 
   const { list = [] } = formData
 
   const child = list.map(item => `<el-table-column prop="${item.field}" label="${item.name}"></el-table-column>`).join('\n')
 
   const str = `<w-table
 
-    v-loading="tableLoading"
 
+    v-loading="loading"
 
     :data="tableData"
 
     @size-change="sizeChange"
 
     @page-change="currentChange"

+ 2 - 2
src/views/Page/Edit/index.vue
مشاهده فایل 

@@ -2,7 +2,7 @@
 
  * @Author: WangJiaCheng
 
  * @Date: 2021-05-10 17:25:15
 
  * @LastEditors: WangJiaCheng
 
- * @LastEditTime: 2021-07-27 10:23:43
 
+ * @LastEditTime: 2021-07-30 11:27:03
 
  * @Description:
 
 -->
 
 <template>
 
@@ -38,7 +38,7 @@
 
         :code-type="codeType"
 
         :visible.sync="previewVisible"
 
         :form-data="formData"
 
-        size="80%"
 
+        size="90%"
 
       />
 
     </main-content>
 
   </div>

+ 4 - 2
src/views/components/previewCode.vue
مشاهده فایل 

@@ -55,7 +55,7 @@
 
               ref="previewPage"
 
               class="result-wrapper"
 
               frameborder="0"
 
-              src="preview.html"
 
+              :src="previewUrl"
 
               @load="iframeLoad"
 
             />
 
             <div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper" />
 
@@ -129,6 +129,9 @@ export default {
 
     }
 
   },
 
   computed: {
 
+    previewUrl() {
 
+      return `${location.origin}/preview.html`
 
+    }
 
   },
 
   watch: {},
 
   created() {
 
@@ -250,7 +253,6 @@ export default {
 
               links: this.links
 
             }
 
           }
 
-          console.log('run', postData)
 
           this.$refs.previewPage.contentWindow.postMessage(
 
             postData,
 
             location.origin

+ 12 - 2
src/views/preview/main.js
مشاهده فایل 

@@ -1,12 +1,19 @@
 
 import Vue from 'vue'
 
+import ElementUI from 'element-ui'
 
+import 'element-ui/lib/theme-chalk/index.css'
 
+import WisdomUI from 'wisdom-ui'
 
+import 'wisdom-ui/lib/theme/index.css'
 
 import { loadScriptQueue } from '@/utils/loadScript'
 
 import axios from 'axios'
 
 import Tinymce from '@/components/tinymce/index.vue'
 
 
 Vue.component('tinymce', Tinymce)
 
 Vue.prototype.$axios = axios
 
+Vue.use(ElementUI, { size: 'small' })
 
+Vue.use(WisdomUI)
 
 
 const $previewApp = document.getElementById('previewApp')
 
+console.log('pre', $previewApp)
 
 const childAttrs = {
 
   file: '',
 
   dialog: ' width="600px" class="dialog-width" v-if="visible" :visible.sync="visible" :modal-append-to-body="false" '
 
@@ -31,9 +38,9 @@ function init(event) {
 
     if (Array.isArray(code.links) && code.links.length > 0) {
 
       links = buildLinks(code.links)
 
     }
 
+    console.log('run------', code)
 
 
     $previewApp.innerHTML = `${links}<style>${code.css}</style><div id="app"></div>`
 
-    console.log('run2', code)
 
     if (Array.isArray(code.scripts) && code.scripts.length > 0) {
 
       loadScriptQueue(code.scripts, () => {
 
         newVue(attrs, code.js, code.html)
 
@@ -47,7 +54,7 @@ function init(event) {
 
 function newVue(attrs, main, html) {
 
   main = eval(`(${main})`)
 
   main.template = `<div>${html}</div>`
 
-  new Vue({
 
+  const App = Vue.component('App', {
 
     components: {
 
       child: main
 
     },
 
@@ -57,5 +64,8 @@ function newVue(attrs, main, html) {
 
       }
 
     },
 
     template: `<div><child ${attrs}/></div>`
 
+  })
 
+  new Vue({
 
+    render: h => h(App)
 
   }).$mount('#app')
 
 }

+ 6 - 0
vue.config.js
مشاهده فایل 

@@ -17,6 +17,7 @@ function resolve(dir) {
 
 
 module.exports = {
 
   publicPath: '/',
 
+  runtimeCompiler: true,
 
   pages: {
 
     index: {
 
       entry: 'src/main.js',
 
@@ -38,6 +39,11 @@ module.exports = {
 
   },
 
   productionSourceMap: false,
 
   configureWebpack: {
 
+    externals: {
 
+      // vue: 'Vue',
 
+      // 'vue-router': 'VueRouter',
 
+      // 'element-ui': 'ELEMENT'
 
+    }
 
   },
 
   chainWebpack(config) {
 
     config.resolve.alias.set('@', resolve('src'))