template

2c81682c · hank · de88bbe1 · 2c81682c
Commit 2c81682c authored Jun 12, 2019 by hank
Hide whitespace changes
Inline Side-by-side

Showing with 138 additions and 0 deletions

public/template.html
+138 -0

No files found.
--- a/public/template.html
+++ b/public/template.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+  <title>测试模板</title>
+  <style>
+    @keyframes border {
+      0% {
+        opacity: 1;
+      }
+      25% {
+        opacity: 0.75;
+      }
+      50% {
+        opacity: 0.5;
+      }
+      100% {
+        opacity: 0.25;
+      }
+    }
+    .isEdit {
+      position: relative;
+
+    }
+    .isEdit::before{
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      content: "";
+      box-sizing: border-box;
+      z-index: 2;
+      border: 1px dashed yellowgreen;
+      
+    }
+    .isEdited::before {
+      animation: border 2s ease-in-out infinite;
+    }
+    .container {
+      padding: 0 20px;
+    }
+    .title {
+      height: 50px;
+      line-height: 50px; 
+      padding: 0 20px;
+      border-bottom: #eeeeee 2px solid;
+    }
+    .name {
+      padding: 0 20px;
+      border-bottom: #eeeeee 2px solid;
+      padding-bottom: 20px;
+    }
+    .bottom img {
+      height: 200px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container" id="myApp">
+    <div class="title ">
+       <span class="">{{date}}</span>
+    </div>
+    <h2 class="name" > <span class="isEdit" :class="isEditMode &&  currentIndex === 0 ? 'isEdited': ''"   @click="edit(list[0], 0)">{{list[0].value}}</span></h2>
+    <div class="bottom">
+        <img class="isEdit" @click="edit(list[1], 1)" :class="isEditMode &&  currentIndex === 1 ? 'isEdited': ''" :src="list[1].value" alt="">
+    </div>
+  </div>
+</body>
+<script>
+  var myApp = new Vue({
+    el: "#myApp",
+    methods: {
+      getDefaulted() {
+        this.list = this.list.map(function(item){
+          return item = Object.assign(item, item.default)
+        })
+      },
+      edit(item,index) {
+        this.currentIndex = index;
+        console.log(this.currentIndex)
+        window.parent.postMessage({
+          type: 'edit',
+          item,index
+        }, '*')
+      }
+    },
+    created() {
+      this.getDefaulted()
+    },
+    data: {
+      date: new Date().toLocaleString(),
+      list: [
+        {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          default: {
+            value: '3F'
+          }
+        },
+        {
+          type: 'image',
+          name: '图片',
+          value: '',
+          default: {
+            value: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560341197372&di=742752578d361795717808c0f2861855&imgtype=0&src=http%3A%2F%2Fk.zol-img.com.cn%2Fsjbbs%2F7692%2Fa7691515_s.jpg'
+          }
+        }
+      ],
+      currentIndex: '',
+      isEditMode: true
+    }
+  })
+  var container = document.querySelector('#myApp')
+  window.addEventListener('message', function (e) {
+    if (e.source != window.parent) return;
+    console.log(e.data, '客户端发来的消息');
+    console.log(typeof e.data === "object" && e.data['type'] == 'setData')
+    if( typeof e.data === "object" && e.data['type'] == 'setData') {
+      console.log(myApp.list[e.data.index])
+      myApp.list[e.data.index].value = e.data['value']
+    }
+    if( typeof e.data === "object" && e.data['type'] == 'cancelEdit') {
+      myApp.currentIndex = ''
+    }
+    // window.parent.postMessage(color, '*');
+  }, false)
+
+</script>
+
+</html>
\ No newline at end of file