Vue Component Properties
Because vdf is a component based on Vue.js, we have to configure and use vdf through prop and event. If you don't know the concept of Vue Component, click here for more detail.
Here is a simple example to help you, or see the online demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VDF-静态示例</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- ElementUI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- vue-data-form -->
<script src="https://unpkg.com/vue-data-form/dist/vue-data-form.js"></script>
</head>
<body>
<div id="app">
<vue-data-form
id="myForm"
title="数据表单"
:elements="elements"
@focus="focus"
@blur="blur"
@change="change"
@save="save"
@reset="reset">
</vue-data-form>
</div>
<script>
new Vue({
el: '#app',
components: {
'vue-data-form': VueDataForm
},
data: function() {
return {
elements: [
{
"id": "title",
"type": "input",
"name": "标题",
"value": "VUE-DATA-FORM"
},
{
"id": "subTitle",
"type": "input",
"name": "副标题",
"value": "这是一个神奇的表单"
},
{
"id": "desc",
"type": "input",
"name": "描述",
"value": "这都是根据配置表来渲染的，不需要写js代码"
}
]
}
},
methods: {
focus: function(data) {
console.log('Focus: ' + JSON.stringify(data));
},
blur: function(data) {
console.log('Blur: ' + JSON.stringify(data));
},
change: function(data) {
console.log('Change: ' + JSON.stringify(data));
},
save: function(data) {
alert('Result:\n' + JSON.stringify(data));
},
reset: function() {
alert('Reset!');
}
}
});
</script>
</body>
</html>