style(constant): add PAGE_MODE

ly525
1 parent e63b59c1
Showing 4 changed files with 42 additions and 18 deletions
front-end/h5/src/components/core/editor/edit-panel/props/global-work.vue
front-end/h5/src/components/core/models/work.js
front-end/h5/src/constants/work.js
front-end/h5/src/engine-entry.js
@@ -10,15 +10,10 @@
  -->
 <template>
   <a-form :layout="formLayout">
-    <a-form-item
-      label="H5类型"
-    >
-      <a-radio-group default-value="h5_swipper" @change="handleModeChange" size="small">
-        <a-radio-button value="h5_swipper">
-          翻页H5
-        </a-radio-button>
-        <a-radio-button value="h5_long_page">
-          长页面H5
+    <a-form-item label="H5类型">
+      <a-radio-group v-model="pageMode" @change="handleModeChange" size="small">
+        <a-radio-button v-for="(value, key) in PAGE_MODE" :key="key" :value="value">
+          {{PAGE_MODE_LABEL[key]}}
         </a-radio-button>
       </a-radio-group>
     </a-form-item>
@@ -26,11 +21,29 @@
 </template>
 <script>
-import { mapActions } from 'vuex'
+import { mapState, mapActions } from 'vuex'
+import { PAGE_MODE, PAGE_MODE_LABEL } from '@/constants/work'
+
 export default {
   data () {
     return {
-      formLayout: 'vertical'
+      formLayout: 'vertical',
+      PAGE_MODE: Object.freeze(PAGE_MODE),
+      PAGE_MODE_LABEL: Object.freeze(PAGE_MODE_LABEL)
+    }
+  },
+  computed: {
+    ...mapState('editor', ['work']),
+    // 翻页模式、长页面模式
+    // src/constants/work -> PAGE_MODE
+    // https://vuex.vuejs.org/zh/guide/forms.html#%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7
+    pageMode: {
+      get () {
+        return this.work.mode
+      },
+      set (model) {
+        this.updateWork({ mode })
+      }
     }
   },
   methods: {
@@ -9,6 +9,7 @@
  * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  */
 import Page from './page.js'
+import { PAGE_MODE } from '@/constants/work'
 class Work {
   constructor (work = {}) {
@@ -32,12 +33,7 @@ class Work {
     this.is_publish = false
     this.is_template = false
     this.height = work.height || 568
-    /**
-     * 页面模式，枚举值
-     * h5_swipper 翻页H5
-     * h5_long_page 长页面H5
-     */
-    this.mode = work.mode || 'h5_swipper'
+    this.mode = work.mode || PAGE_MODE.SWIPPER_PAGE
   }
 }
+/**
+  * 页面模式，枚举值
+  * h5_swipper 翻页H5
+  * h5_long_page 长页面H5
+ */
+export const PAGE_MODE = {
+  SWIPPER_PAGE: 'h5_swipper',
+  LONG_PAGE: 'h5_long_page',
+}
+
+export const PAGE_MODE_LABEL = {
+  SWIPPER_PAGE: '翻页H5',
+  LONG_PAGE: '长页面',
+}
 \ No newline at end of file
@@ -19,6 +19,7 @@ import message from &#39;ant-design-vue/lib/message&#39; // 加载 JS
 import 'ant-design-vue/lib/message/style/css' // 加载 CSS
 import { pluginsList } from './mixins/load-plugins.js'
+import { PAGE_MODE } from './constants/work.js'
 import Element from './components/core/models/element'
 import NodeWrapper from '@/components/preview/node-wrapper.js'
@@ -32,7 +33,7 @@ const Engine = {
   },
   data() {
     return {
-      isLongPage: window.__work.mode === 'h5_long_page',
+      isLongPage: window.__work.mode === PAGE_MODE.LONG_PAGE
     }
   },
   methods: {