<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script> </head>
<body>
<div id="app">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-submenu index="cfg">
<template slot="title">Config</template>
<el-menu-item index="cfg-save">Save</el-menu-item>
<el-menu-item index="cfg-load">Load</el-menu-item>
</el-submenu>
<el-submenu index="node">
<template slot="title">Add Node</template>
<el-menu-item v-for="node in nodeTypes" :index="node.index" :key="node.index">{{ node.name }}</el-menu-item>
</el-submenu>
<el-submenu index="console" :disabled="activeName!='console'">
<template slot="title">Console</template>
<el-submenu index="cmd">
<template slot="title">Command</template>
<el-menu-item index="cmd-exec">Execute at cursor</el-menu-item>
<el-menu-item index="cmd-save">Save</el-menu-item>
<el-menu-item index="cmd-load">Load</el-menu-item>
</el-submenu>
<el-submenu index="result">
<template slot="title">Result</template>
<el-menu-item index="result-clear">Clear</el-menu-item>
<el-menu-item index="result-save">Save</el-menu-item>
<el-menu-item index="result-load">Load</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
<el-tabs v-model="activeNode" @tab-click="handleClick" editable>
<el-tab-pane label="main" name="main"></el-tab-pane>
<el-tab-pane label="test" name="test"></el-tab-pane>
<el-tab-pane label="bcoin" name="bcoin"></el-tab-pane>
</el-tabs>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="Information" name="info">Information</el-tab-pane>
<el-tab-pane label="Console" name="console">
<textarea></textarea>
</el-tab-pane>
<el-tab-pane label="Network" name="third">
<component v-bind:is="currentView"></component>
</el-tab-pane>
<el-tab-pane label="Peers" name="fourth">Peers</el-tab-pane>
</el-tabs>
<el-dialog title="Add Node" :visible.sync="dialogVisible" >
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Host">
<el-input vx-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Port">
<el-input vx-model="form.name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">Add</el-button>
</span>
</el-dialog>
</div>
<script src="script.js"></script>
</body>
</html>
Vue.component('zero', {
template: '<div>loading...</div>'
})
var app =new Vue({
el: '#app',
data() {
return {
currentView: 'zero',
activeIndex: '1',
activeName: 'info',
dialogVisible: false,
activeNode: 'main',
form:{},
nodeTypes: [
{index: 'node-bitcoin', name: 'Bitcoin'},
{index: 'node-litecoin', name: 'Litecoin'},
{index: 'node-lighting', name: 'Lightining'},
{index: 'node-bcoin', name: 'bcoin'},
]
}
},
methods: {
handleSelect: function(e) { if(e.slice(0,5)=='node-') this.dialogVisible=true},
handleClick: function(e) { console.log(this.activeName)}
},
created: function () {
var xhr = new XMLHttpRequest();
xhr.open("GET", 'one.html', true);
xhr.setRequestHeader("Content-type", "text/html");
xhr.onload = function (response) {
var div =document.createElement('div')
div.innerHTML = xhr.responseText
var template = div.querySelector('template')
document.body.appendChild(template)
var script = div.querySelector('script')
var runme = document.createElement('script')
runme.textContent = script.textContent
document.body.appendChild(runme)
document.body.removeChild(template)
document.body.removeChild(runme)
div = null
app.currentView='one'
};
xhr.send()
}
})
/* Styles go here */
svg {height: 400px;}
<template id="one">
<div>
<h3>An svg component</h3>
<svg>
<line v-for="(line, i) in lines"
:x1="10+i*3"
:x2="10+i*3"
:y1="400"
:y2="400 - line*400"
:troke-width="2" stroke="green"
/>
</svg>
</div>
</template>
<script>
Vue.component('one', {
data: function() {
return {
lines: [.23,.4,.17,.13,.55,.28,.82]
}
},
created() {
var self = this
setInterval(function() {
self.lines.push(Math.random())
if(self.lines.length > 20) self.lines.splice(0,1)
},1000)
},
template: document.querySelector('#one').innerHTML,
})
</script>