tn-element-ui
Version:
element-ui二次封装
136 lines (134 loc) • 4.09 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>example</title>
<script
type="text/javascript"
src="https://unpkg.zhimg.com/vue@2.6.12/dist/vue.js"
></script>
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
/>
<!-- 引入组件库 -->
<script src="https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.6/ace.js"></script>
<script type="text/javascript" src="../dist/tn-element-ui.js"></script>
<style>
body, html {
margin: 0;
}
#innerPage {
width: 100%;
height: 100%;
border: none;
}
.el-submenu.is-active > .el-submenu__title {
color: #ffd04b;
}
.editor-btn-switch{
position: fixed;
top: 16px;
right: 26px;
z-index: 999;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<el-button
class="editor-btn-switch"
type="info"
plain
size="small"
:icon="editorVisible ? 'el-icon-back' : 'el-icon-right'"
@click="editorVisible = !editorVisible"
>{{ editorVisible ? '隐藏源码' : '源码' }}</el-button>
<!-- content-wrapper edit-container -->
<tn-h-box class="tn-absolute-fit tn-flex-box">
<el-menu
:default-active="defaultActive"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
style="width: 230px;"
@select="handleSelect">
<template v-for="(value, key) in exampleConfig">
<el-menu-item v-if="!value.children" :key="key" :index="value.fileName">
<template slot="title">{{ value.name }}</template>
</el-menu-item>
<el-submenu v-else :index="key" :key="key">
<template slot="title">{{ value.name }}</template>
<el-menu-item v-for="(item) in value.children" :key="item.name" :index="item.fileName">
<template slot="title">{{ item.name }}</template>
</el-menu-item>
</el-submenu>
</template>
</el-menu>
<tn-v-box v-show="editorVisible" size="600px">
<div bordered>
<tn-h-box cellspacing align-items="center">
<div>源代码编辑器</div>
<tn-space></tn-space>
<el-button
size="small"
type="primary"
plain
icon="el-icon-refresh-left"
@click="refresh"
>重置</el-button>
<el-button
size="small"
type="primary"
@click="run"
icon="el-icon-video-play"
>运行</el-button>
</tn-h-box>
</div>
<div size="1">
<div id="editor" class="tn-absolute-fit">
</div>
</div>
</tn-v-box>
<div size="1" id="previewPane">
<!--<iframe id='innerPage' name='innerPage'></iframe>-->
</div>
</tn-h-box>
</div>
<script src="./js/editor.js"></script>
<script src="./config.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data () {
return {
exampleConfig,
defaultActive: 'tn-eltable',
editorVisible: false
}
},
methods: {
run () {
editor.run()
},
refresh () {
editor.refresh()
},
handleSelect (fileName) {
window.location.hash = `#${fileName}`
editor.initPage()
},
},
mounted () {
window.location.hash = `#${this.defaultActive}`
editor.initPage()
}
})
</script>
</body>
</html>