模板通信 模板修改

src/components/HelloWorld.vue

 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+    <div class="btn-container">
+      <button>保存</button>
+      <button>预览</button>
+      <button @click="message('message')">发送消息</button>
+     <div v-if="isEdited">
+        <input type="text" v-model="editObj.value" @keyup="valueChange">
+        <button @click="cancel">取消编辑</button>
+      </div> 
+    </div>
+    <div
+      class="view-content"
+      :style="{
+        height: templateData.height + 'px',
+        width: templateData.width + 'px'
+      }"
+    >
+      <iframe  class="view-content-item" :src="templateData.originUrl" frameborder="0"></iframe>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'HelloWorld',
+  name: "HelloWorld",
+  data() {
+    return {
+      templateData: {
+        height: 450,
+        width: 800,
+        originUrl: "http://localhost:9000/template.html",
+        listData: []
+      },
+      editObj: {},
+      editIndex: '',
+      isEdited: false
+    };
+  },
+  created() {
+    let vm = this
+    window.addEventListener(
+      "message",
+      function(e) {
+        console.log(e.data, '模板页面发来的消息');
+        if( typeof e.data === "object" && e.data['type'] == 'edit') {
+          vm.editIndex = e.data.index
+          vm.editObj = e.data.item
+          vm.isEdited = true
+        }
+        // var color = e.data;
+        // document.getElementById("color").style.backgroundColor = color;
+      },
+      false
+    );
+  },
+  mounted() {
+   window.onload = function() {
+      console.log(window.frames[0])
+      window.frames[0].postMessage("getcolor", "http://localhost:9000");
+   }
+  },
+  methods: {
+    message(data) {
+      window.frames[0].postMessage(data, "http://localhost:9000")
+    },
+    valueChange() {
+      this.message({
+        type: 'setData',
+        index: this.editIndex,
+        value: this.editObj.value
+      })
+    },
+    cancel() {
+      this.isEdited = false
+      this.message({
+        type: 'cancelEdit'
+      })
+    }
+  },
   props: {
     msg: String
   }
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+.hello {
+  text-align: left;
+}
+.view-content-item {
+  width: 100%;
+  height: 100%;
+}
 h3 {
   margin: 40px 0 0;
 }

src/views/Home.vue

 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
     <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>