run this example
<!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 demovalidate2={
template: `
<div>
<button @click="dialogClosed=false">打开</button>
<Dialog ref="d1" bodyCls="f-column" :dialogStyle="{width:'700px',height:'550px'}" title="标题" :closed="dialogClosed" @open="onDialogOpen">
<Form ref="form" :model="user" :rules="rules" @validate="errors=$event">
<div style="margin-bottom:20px">
<Label for="name" align="top">Name:</Label>
<TextBox ref="name" inputId="name" name="name" v-model="user.name" v-Tooltip="getTipOpts('name')"></TextBox>
</div>
</Form>
<p>{{user}}</p>
</Dialog>
</div>
`,
data() {
return {
dialogClosed: true,
user: {
name: null
},
rules: {
name: ["required", "length[5,10]"]
},
errors: {}
};
},
methods: {
onDialogOpen() {
this.$nextTick(() => {
this.$refs.name.focus()
this.$refs.form.validate()
})
},
getError(name) {
return this.errors[name] && this.errors[name].length
? this.errors[name][0]
: null;
},
hasError(name) {
return this.getError(name) != null;
},
getTipOpts(name) {
return {
content: this.getError(name),
closed: !this.hasError(name),
position: "right"
};
},
}
}
var app = new Vue({
el: '#app',
template: `<demovalidate2 class="mycontainer"></demovalidate2>`,
components: {
demovalidate2:demovalidate2 }
})
</script>
<style>
.error {
color: red;
font-size: 12px;
margin: 4px 0;
}
</style>
</body>
</html>
