<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI for Vue</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/vue.css">
<script src="http://www.jeasyui.com/node_modules/vx-easyui/vue.min.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/babel-polyfill.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/vx-easyui-min.js"></script>
<script src="http://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 demointeractive={
template: `
<div>
<h2>Interactive Messager</h2>
<LinkButton @click="confirm()">Confirm</LinkButton>
<LinkButton @click="prompt()">Prompt</LinkButton>
</div>
`,
methods: {
confirm() {
this.$messager.confirm({
title: "Confirm",
msg: "Are you confirm this?",
ok: '确定',
cancel:'取消',
result: r => {
if (r) {
alert("confirmed: " + r);
}
}
});
},
prompt() {
this.$messager.prompt({
title: "Prompt",
msg: "Please type something",
result: r => {
if (r) {
alert("you type: " + r);
}
}
});
}
}
}
var app = new Vue({
el: '#app',
template: `<demointeractive class="mycontainer"></demointeractive>`,
components: {
demointeractive:demointeractive }
})
</script>
</body>
</html>
