Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
zhangs
/
h5maker
1
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

组件拆分

郑国榕 8 gadi atpakaļ
vecāks
658c6f325a
revīzija
928f670186
8 mainītis faili ar 372 papildinājumiem un 476 dzēšanām
Apvienotais skats Rādīt salīdzināšanas statistiku
  1. 1 1
      webapp/index.html
  2. 68 0
      webapp/src/components/BgPanel.vue
  3. 153 0
      webapp/src/components/EditPanel.vue
  4. 62 0
      webapp/src/components/HeaderEdit.vue
  5. 0 1
      webapp/src/components/PreView.vue
  6. 47 0
      webapp/src/components/SvgPanel.vue
  7. 11 210
      webapp/src/views/h5editor/index.vue
  8. 30 264
      webapp/src/views/spaeditor/index.vue

+ 1 - 1
webapp/index.html
Parādīt failu 

@@ -2,7 +2,7 @@
 
 <html>
 
 <html>
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
-    <title>lime software</title>
 
+    <title>h5在线编辑平台</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 68 - 0
webapp/src/components/BgPanel.vue
Parādīt failu 

@@ -0,0 +1,68 @@
 
+<template>
 
+  <div class="panel panel-bg">
 
+    <div class="clearfix"
 
+         v-if="panelTabState !== 1">
 
+      <el-button class="btn"
 
+                 type="success"
 
+                 @click="panelTabState = 1">更换背景</el-button>
 
+      <el-button class="btn"
 
+                 type="danger"
 
+                 @click="cleanBG">移除背景</el-button>
 
+    </div>
 
+    <div class="clearfix"
 
+         v-if="panelTabState === 1">
 
+      <PicPicker class="bgs"
 
+                 @uploaded="uploadImage"
 
+                 @style="style"></PicPicker>
 
+      <div class="bgs"
 
+           :style="{ backgroundImage: 'url(' + http + element.filePath + ')' }"
 
+           @click="addBG(element.filePath)"
 
+           v-for="element in picList"></div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<style lang="less" scoped>
 
+.panel-bg {
 
+  .btn {
 
+    float: left;
 
+    width: 48%;
 
+    margin-left: 1%;
 
+    margin-right: 1%;
 
+  }
 
+  .bgs {
 
+    float: left;
 
+    width: 80px;
 
+    height: 80px;
 
+    background-repeat: no-repeat;
 
+    background-position: center;
 
+    background-size: contain;
 
+    margin: 5px 5px;
 
+    &:hover {
 
+      border: 2px solid #18ccc0;
 
+      cursor: pointer;
 
+    }
 
+  }
 
+}
 
+</style>
 
+
 
+<script>
 
+export default {
 
+  props: {
 
+    element: {
 
+      type: Object
 
+    },
 
+    addBG: {
 
+      type: Function
 
+    },
 
+    cleanBG: {
 
+      type: Function
 
+    }
 
+  },
 
+  data () {
 
+    return {
 
+      panelTabState: 0
 
+    }
 
+  }
 
+}
 
+</script>

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 153 - 0
webapp/src/components/EditPanel.vue


+ 62 - 0
webapp/src/components/HeaderEdit.vue
Parādīt failu 

@@ -0,0 +1,62 @@
 
+<template>
 
+  <header class="header">
 
+    <button class="reset-btn"
 
+            @click="goback"><i class="el-icon-arrow-left"></i>返回作品</button>
 
+    <div class="right-panel">
 
+      <el-button @click="deploy"
 
+                 class="preview"
 
+                 type="info"
 
+                 :loading="loading">预览</el-button>
 
+    </div>
 
+  </header>
 
+</template>
 
+
 
+<script>
 
+import tools from '../util/tools'
 
+export default {
 
+  props: {
 
+    goback: Function
 
+  },
 
+  data () {
 
+    return {
 
+      loading: false
 
+    }
 
+  },
 
+  methods: {
 
+    deploy () {
 
+      this.loading = true
 
+      this.$store.dispatch('saveTheme', tools.vue2json(this.$store.state.editor.editorTheme)).then(() => {
 
+        setTimeout(() => {
 
+          this.$emit('saveThemeSuccess')
 
+          this.loading = false
 
+        }, 1000)
 
+      })
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.header {
 
+  height: 60px;
 
+  background-color: #373f42;
 
+  color: #fff;
 
+  .reset-btn {
 
+    height: 100%;
 
+    padding: 0 20px;
 
+    cursor: pointer;
 
+  }
 
+  .el-icon-arrow-left {
 
+    margin-right: 20px;
 
+  }
 
+  .right-panel {
 
+    float: right;
 
+    height: 100%;
 
+    width: 100px;
 
+    display: flex;
 
+    align-items: center;
 
+    padding-right: 15px;
 
+    flex-direction: row-reverse;
 
+  }
 
+}
 
+</style>

+ 0 - 1
webapp/src/components/PreView.vue
Parādīt failu 

@@ -29,7 +29,6 @@
 
         <i class="el-icon-close"></i>
 
         <i class="el-icon-close"></i>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
-    <PreView :itemId="itemId" @hideView="showPreView=false" v-if="showPreView"/>
 
   </div>
 
   </div>
 
 </template>
 
 </template>

+ 47 - 0
webapp/src/components/SvgPanel.vue
Parādīt failu 

@@ -0,0 +1,47 @@
 
+<template>
 
+  <div class="panel panel-shape clearfix">
 
+    <svg class="shape"
 
+         @click="addIcon('action-redo')">
 
+      <use xlink:href="/static/svg/icon.svg#action-redo"></use>
 
+    </svg>
 
+    <svg class="shape"
 
+         @click="addIcon('circle-fill')"
 
+         fill="#000">
 
+      <use xlink:href="/static/svg/icon.svg#circle-fill"
 
+           fill="#000"></use>
 
+    </svg>
 
+    <svg class="shape"
 
+         @click="addIcon('bmLogo')">
 
+      <use xlink:href="/static/svg/icon.svg#bmLogo"
 
+           fill="#fff"></use>
 
+    </svg>
 
+  </div>
 
+</template>
 
+
 
+<style lang="less" scoped>
 
+.panel-shape {
 
+  .shape {
 
+    float: left;
 
+    width: 80px;
 
+    height: 80px;
 
+    margin: 5px;
 
+  }
 
+}
 
+</style>
 
+
 
+<script>
 
+export default {
 
+  methods: {
 
+    addIcon (iconKey) {
 
+      let obj = {}
 
+      obj.type = 'icon'
 
+      obj.iconKey = iconKey
 
+      obj.top = 0
 
+      obj.left = 0
 
+      obj.width = 100
 
+      obj.height = 100
 
+      this.$store.dispatch('addElement', obj)
 
+    }
 
+  }
 
+}
 
+</script>

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 11 - 210
webapp/src/views/h5editor/index.vue


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 30 - 264
webapp/src/views/spaeditor/index.vue