Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit de88bbe1 by hank
Options

模板通信 模板修改

parent 8f1350a2
Showing with 82 additions and 32 deletions
src/components/HelloWorld.vue
<template> <template>
<div class="hello"> <div class="hello">
<h1>{{ msg }}</h1> <div class="btn-container">
<p> <button>保存</button>
For a guide and recipes on how to configure / customize this project,<br> <button>预览</button>
check out the <button @click="message('message')">发送消息</button>
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. <div v-if="isEdited">
</p> <input type="text" v-model="editObj.value" @keyup="valueChange">
<h3>Installed CLI Plugins</h3> <button @click="cancel">取消编辑</button>
<ul> </div>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> </div>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li> <div
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> class="view-content"
<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> :style="{
</ul> height: templateData.height + 'px',
<h3>Essential Links</h3> width: templateData.width + 'px'
<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> <iframe class="view-content-item" :src="templateData.originUrl" frameborder="0"></iframe>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> </div>
<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> </div>
</template> </template>
<script> <script>
export default { 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: { props: {
msg: String msg: String
} }
} };
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
.hello {
text-align: left;
}
.view-content-item {
width: 100%;
height: 100%;
}
h3 { h3 {
margin: 40px 0 0; margin: 40px 0 0;
} }
......
src/views/Home.vue
<template> <template>
<div class="home"> <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"/> <HelloWorld msg="Welcome to Your Vue.js App"/>
</div> </div>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment