<!DOCTYPE html>
<html>
<head>
<title>表单设计器kcz</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="//unpkg.com/k-form-design/lib/k-form-design.css">
</head>
<body>
<div id="app">
<k-form-build ref="kfb" :value=" jsonData"></k-form-build>
<button @click="handleGetData">获取数据</button>
</div>
<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="http://cdn.kcz66.com/vue.min.js"></script> -->
<script src="//unpkg.com/k-form-design/lib/k-form-design.umd.min.js"></script>
<script>
let jsonData = { "list": [{ "type": "input", "label": "单行文本", "options": { "width": "100%", "defaultValue": "", "placeholder": "请输入", "disabled": false }, "model": "input_1577875678405", "key": "input_1577875678405", "rules": [{ "required": true, "message": "必填项" }] }, { "type": "date", "label": "日期选择器", "options": { "width": "100%", "defaultValue": "", "range": false, "showTime": false, "disabled": false, "clearable": false, "placeholder": "请选择", "rangePlaceholder": ["开始时间", "结束时间"], "format": "YYYY-MM-DD" }, "model": "date_1577877450971", "key": "date_1577877450971", "rules": [{ "required": true, "message": "必填项" }] }, { "type": "textarea", "label": "多行文本", "options": { "width": "100%", "minRows": 4, "maxRows": 6, "defaultValue": "", "disabled": false, "placeholder": "请输入" }, "model": "textarea_1577877446659", "key": "textarea_1577877446659", "rules": [{ "required": true, "message": "必填项" }] }, { "type": "rate", "label": "评分", "options": { "defaultValue": 0, "max": 5, "disabled": false, "allowHalf": false }, "model": "rate_1577877468717", "key": "rate_1577877468717", "rules": [{ "required": true, "message": "必填项" }] }], "config": { "layout": "horizontal", "labelCol": { "span": 4 }, "wrapperCol": { "span": 18 }, "hideRequiredMark": false, "customStyle": "" } }
let vm = new Vue({
el: '#app',
data: {
jsonData
},
methods: {
handleGetData() {
// 使用getData函数获取数据
this.$refs.kfb.getData().then(values => {
console.log('验证通过', values)
alert(JSON.stringify(values,null,'\r\n'))
}).catch(() => {
console.log('验证未通过，获取失败')
})
}
}
})
</script>
</body>
</html>