<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI for Vue</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/vue.css">
<script src="https://www.jeasyui.com/node_modules/vx-easyui/vue.min.js"></script>
<script src="https://www.jeasyui.com/node_modules/vx-easyui/babel-polyfill.js"></script>
<script src="https://www.jeasyui.com/node_modules/vx-easyui/vx-easyui-min.js"></script>
<script src="https://www.jeasyui.com/node_modules/vx-easyui/babel.min.js"></script>
<style type="text/css">
body{
padding: 20px;
}
h2{
margin: 0 0 20px 0;
}
.mycontainer{
min-width: 700px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var demobasic={
template: `
<div>
<h2>Basic Tabs</h2>
<Tabs style="height:250px" @contextmenu.prevent="$refs.m1.showContextMenu($event.pageX,$event.pageY)">
<TabPanel :title="'Tab1'">
<p>Tab Panel1</p>
</TabPanel>
<TabPanel :title="'Tab2'">
<p>Tab Panel2</p>
</TabPanel>
<TabPanel :title="'Tab3'">
<p>Tab Panel3</p>
</TabPanel>
<TabPanel :title="'Help'" :closable="true" iconCls="icon-help">
<p>This is the help content.</p>
</TabPanel>
</Tabs>
<Menu ref="m1">
<MenuItem text="New"></MenuItem>
<MenuItem text="Open">
<SubMenu>
<MenuItem text="Word"></MenuItem>
<MenuItem text="Excel"></MenuItem>
<MenuItem text="PowerPoint"></MenuItem>
</SubMenu>
</MenuItem>
<MenuItem text="Save" iconCls="icon-save"></MenuItem>
<MenuItem text="Print" iconCls="icon-print" :disabled="true"></MenuItem>
<MenuItem text="Exit"></MenuItem>
</Menu>
</div>
`,
}
var app = new Vue({
el: '#app',
template: `<demobasic class="mycontainer"></demobasic>`,
components: {
demobasic:demobasic
}
})
</script>
</body>
</html>