chenc
/
cd_form_editor_web


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940
							<!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>