webpackJsonp([33],{"0xxl":function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"Form"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Form-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Form")]),s._v(" "),s._m(0),s._v(" "),a("p",[s._v("表单，包含各种输入组件以及对应的校验；我们可以通过数据驱动的方式来生成完成表单。")]),s._v(" "),a("h3",{attrs:{id:"示例"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-示例-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 示例")]),s._v(" "),s._m(1),s._v(" "),a("h3",{attrs:{id:"Props配置"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Props配置-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props 配置")]),s._v(" "),a("h4",{attrs:{id:"CubeForm"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeForm-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" CubeForm")]),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h4",{attrs:{id:"CubeFormGroup"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeFormGroup-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" CubeFormGroup")]),s._v(" "),s._m(4),s._v(" "),a("h4",{attrs:{id:"CubeFormItem"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeFormItem-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" CubeFormItem")]),s._v(" "),s._m(5),s._v(" "),a("h3",{attrs:{id:"事件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-事件-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 事件")]),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),a("h3",{attrs:{id:"实例方法"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-实例方法-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 实例方法")]),s._v(" "),s._m(8)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("1.7.0 新增")]),s._v(" "),a("p",[s._v("从 1.8.0 开始支持blur 时才触发校验以及 debounce，同 Validator 一样也开始支持异步校验。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("默认配置使用")]),s._v(" "),a("p",[s._v("一个完整的包含所有的内置表单相关组件。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"model"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":schema")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"schema"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":immediate-validate")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@validate")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"validateHandler"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@submit")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"submitHandler"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@reset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"resetHandler"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("validity")]),s._v(": {},\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("valid")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("undefined")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("model")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxValue")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroupValue")]),s._v(": [],\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputValue")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radioValue")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rateValue")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectValue")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2018")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("switchValue")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("textareaValue")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("uploadValue")]),s._v(": []\n      },\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("schema")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("groups")]),s._v(": [\n          {\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("legend")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'基础'")]),s._v(",\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fields")]),s._v(": [\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkboxValue'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("option")]),s._v(": {\n                    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v(",\n                    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                  }\n                },\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                },\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("messages")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please check this field'")]),s._v("\n                }\n              },\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox-group'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkboxGroupValue'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CheckboxGroup'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'3'")]),s._v("]\n                },\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                }\n              },\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'inputValue'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'请输入'")]),s._v("\n                },\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                },\n                "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// validating when blur")]),s._v("\n                trigger: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v("\n              },\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio-group'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radioValue'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'3'")]),s._v("]\n                },\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                }\n              },\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'selectValue'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("2015")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("2017")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("2018")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("2019")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("2020")]),s._v("]\n                },\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                }\n              },\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switchValue'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                }\n              },\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'textarea'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'textareaValue'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Textarea'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                },\n                "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// debounce validate")]),s._v("\n                "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if set to true, the default debounce time will be 200(ms)")]),s._v("\n                debounce: "),a("span",{attrs:{class:"hljs-number"}},[s._v("100")]),s._v("\n              }\n            ]\n          },\n          {\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("legend")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'高级'")]),s._v(",\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fields")]),s._v(": [\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rateValue'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                }\n              },\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'uploadValue'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("events")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-string"}},[s._v("'file-removed'")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("...args")]),s._v(") =>")]),s._v(" {\n                    "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'file removed'")]),s._v(", args)\n                  }\n                },\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("uploaded")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("val, config")]),s._v(") =>")]),s._v(" {\n                    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Promise")]),s._v(".all(val.map("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("file, i")]),s._v(") =>")]),s._v(" {\n                      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Promise")]),s._v("("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("resolve, reject")]),s._v(") =>")]),s._v(" {\n                        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (file.uploadedUrl) {\n                          "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve()\n                        }\n                        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// fake request")]),s._v("\n                        setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n                          "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (i % "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(") {\n                            reject("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("())\n                          } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n                            file.uploadedUrl = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'uploaded/url'")]),s._v("\n                            resolve()\n                          }\n                        }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(")\n                      })\n                    })).then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n                      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n                    })\n                  }\n                },\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("messages")]),s._v(": {\n                  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("uploaded")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'上传失败'")]),s._v("\n                }\n              }\n            ]\n          },\n          {\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fields")]),s._v(": [\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Submit'")]),s._v("\n              },\n              {\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'reset'")]),s._v(",\n                "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Reset'")]),s._v("\n              }\n            ]\n          }\n        ]\n      },\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("scrollToInvalidField")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'standard'")]),s._v(" "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// classic fresh")]),s._v("\n      }\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    submitHandler(e) {\n      e.preventDefault()\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit'")]),s._v(", e)\n    },\n    validateHandler(result) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".validity = result.validity\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".valid = result.valid\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'validity'")]),s._v(", result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)\n    },\n    resetHandler(e) {\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'reset'")]),s._v(", e)\n    }\n  }\n}\n")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("model")]),s._v(" 就是整个表单需要的数据源，"),a("code",{pre:!0},[s._v("schema")]),s._v(" 就是生成表单所定义的模式，"),a("code",{pre:!0},[s._v("immediate-validate")]),s._v(" 如果为 true 则初始时立即做校验，"),a("code",{pre:!0},[s._v("options")]),s._v(" 则是配置选项。")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("submit")]),s._v(" 校验成功后提交事件，"),a("code",{pre:!0},[s._v("validate")]),s._v(" 每次有数据校验更新的事件，"),a("code",{pre:!0},[s._v("reset")]),s._v(" 则是重置事件。")])]),s._v(" "),a("li",[a("p",[s._v("自定义使用")]),s._v(" "),a("p",[s._v("你可以选择使用自己自定义的组件甚至通过插槽来自定义结构和行为。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"model"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@validate")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"validateHandler"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@submit")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"submitHandler"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-group")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":field")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fields[0]"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-item")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":field")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fields[1]"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-item")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":field")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fields[2]"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showDatePicker"')]),s._v(">")]),s._v("{{model.dateValue || 'Please select date'}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("date-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datePicker"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[2008, 8, 8]"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[2020, 10, 20]"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dateSelectHandler"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("date-picker")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-item")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-group")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-group")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"submit"')]),s._v(">")]),s._v("Submit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form-group")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-form")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// province, city, area")]),s._v("\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// select component")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" PCA = {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Array")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v("() {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" []\n      }\n    }\n  },\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selected")]),s._v(": []\n    }\n  },\n  render(createElement) {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" createElement("),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-button'")]),s._v(", {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("click")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".showPicker\n      }\n    }, "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selected.length ? "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selected.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("' '")]),s._v(") : "),a("span",{attrs:{class:"hljs-string"}},[s._v("'placeholder'")]),s._v(")\n  },\n  mounted() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".picker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createCascadePicker({\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'PCA Select'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": cityData,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedIndex")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".value,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandler\n    })\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showPicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".picker.show()\n    },\n    selectHandler(selectedVal, selectedIndex, selectedTxt) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selected = selectedTxt\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(", selectedVal)\n    }\n  }\n}\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("validity")]),s._v(": {},\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("valid")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("undefined")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("model")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputValue")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pcaValue")]),s._v(": [],\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dateValue")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n      },\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fields")]),s._v(": [\n        {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'inputValue'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'请输入'")]),s._v("\n          },\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n          }\n        },\n        {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("component")]),s._v(": PCA,\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pcaValue'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'PCASelect'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n          },\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("messages")]),s._v(": {\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'请选择'")]),s._v("\n          }\n        },\n        {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dateValue'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Date'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n          }\n        }\n      ]\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    submitHandler(e) {\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit'")]),s._v(")\n    },\n    validateHandler(result) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".validity = result.validity\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".valid = result.valid\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'validity'")]),s._v(", result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)\n    },\n    showDatePicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.datePicker.show()\n    },\n    dateSelectHandler(selectedVal) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".model.dateValue = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("(selectedVal["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("], selectedVal["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] - "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", selectedVal["),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("]).toDateString()\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("components")]),s._v(": {\n    DatePicker\n  }\n}\n")])]),s._v(" "),a("p",[s._v("可以通过 "),a("code",{pre:!0},[s._v("component")]),s._v(" 指定实现了 "),a("code",{pre:!0},[s._v("v-model")]),s._v(" 的自定义组件，例如示例中的 "),a("code",{pre:!0},[s._v("PCA")]),s._v(" 组件；也可以通过使用插槽自定义结构行为，比如示例中的日期选择。")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("model")]),s._v(" "),a("td",[s._v("数据源")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("schema")]),s._v(" "),a("td",[s._v("生成表单依赖的模式")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("immediateValidate")]),s._v(" "),a("td",[s._v("初始化时是否立即校验")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("action")]),s._v(" "),a("td",[s._v("表单 Form action 的值")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("undefined")])]),s._v(" "),a("tr",[a("td",[s._v("options")]),s._v(" "),a("td",[s._v("配置项")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("{"),a("br"),s._v("scrollToInvalidField: false,"),a("br"),s._v(" layout: 'standard' // or: classic")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[a("code",{pre:!0},[s._v("schema")]),s._v(" 子配置项")]),s._v(" "),a("p",[s._v("模式用于定义表单中的各个字段，可以选择是否分组。")]),s._v(" "),a("ul",[a("li",[a("p",[s._v("无分组")]),s._v(" "),a("p",[s._v("直接包含 "),a("code",{pre:!0},[s._v("fields")]),s._v(" 即可：")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fields")]),s._v(": [\n    {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'inputValue'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n    },\n    "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n  ]\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("有分组")]),s._v(" "),a("p",[s._v("可以设置 "),a("code",{pre:!0},[s._v("groups")]),s._v("：")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("groups")]),s._v(": [\n    {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("legend")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Group 1'")]),s._v("\n      fields: [\n        {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'inputValue'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n        },\n        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n      ]\n    },\n    {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("legend")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Group 2'")]),s._v("\n      fields: [\n        {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("modelKey")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'inputValue'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n        },\n        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n      ]\n    }\n  ]\n}\n")])])])]),s._v(" "),a("p",[s._v("不管有没有分组，我们都需要使用 "),a("code",{pre:!0},[s._v("fields")]),s._v(" 定义表单字段，其中每一项可以有如下属性：")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("type")]),s._v(" "),a("td",[s._v("字段类型")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("默认内置的可选类型组件有："),a("code",{pre:!0},[s._v("button")]),s._v(", "),a("code",{pre:!0},[s._v("checkbox")]),s._v(", "),a("code",{pre:!0},[s._v("checkbox-group")]),s._v(", "),a("code",{pre:!0},[s._v("input")]),s._v(", "),a("code",{pre:!0},[s._v("radio")]),s._v(", "),a("code",{pre:!0},[s._v("radio-group")]),s._v(", "),a("code",{pre:!0},[s._v("rate")]),s._v(", "),a("code",{pre:!0},[s._v("select")]),s._v(", "),a("code",{pre:!0},[s._v("switch")]),s._v(", "),a("code",{pre:!0},[s._v("textarea")]),s._v(", "),a("code",{pre:!0},[s._v("upload")]),s._v("；以及特殊的 "),a("code",{pre:!0},[s._v("submit")]),s._v(" 和 "),a("code",{pre:!0},[s._v("reset")]),s._v("，它们两个会被转换为对应类型的 "),a("code",{pre:!0},[s._v("button")])]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("component")]),s._v(" "),a("td",[s._v("字段使用的自定义组件，替换 type，该组件组件实现 "),a("code",{pre:!0},[s._v("v-model")])]),s._v(" "),a("td",[s._v("Object/String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("modelKey")]),s._v(" "),a("td",[s._v("在表单的 "),a("code",{pre:!0},[s._v("model")]),s._v(" 数据源对象中所对应的 key 名字")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("label")]),s._v(" "),a("td",[s._v("字段的标签值")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("props")]),s._v(" "),a("td",[s._v("type 对应的组件或者自定义组件 component 所需要的 props")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("events"),a("sup",[s._v("1.8.0+")])]),s._v(" "),a("td",[s._v("type 对应的组件或者自定义组件 component 的事件回调")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("rules")]),s._v(" "),a("td",[s._v("字段的校验规则，参见 "),a("a",{attrs:{href:"#/zh-CN/docs/validator#cube-Props-anchor"}},[s._v("Validator")])]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("trigger"),a("sup",[s._v("1.8.0+")])]),s._v(" "),a("td",[s._v("如果设置为 'blur' 那么则会在离焦后校验")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("blur/change")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("debounce"),a("sup",[s._v("1.8.0+")])]),s._v(" "),a("td",[s._v("控制校验节奏，值为时间，单位 ms。如果 trigger 设置为 blur 则此项配置不生效")]),s._v(" "),a("td",[s._v("Number/Boolean")]),s._v(" "),a("td",[s._v(">= 0，如果设置为 true，那么时间就是 200(ms)")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("messages")]),s._v(" "),a("td",[s._v("字段的校验消息，参见 "),a("a",{attrs:{href:"#/zh-CN/docs/validator#cube-Props-anchor"}},[s._v("Validator")])]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("legend")]),s._v(" "),a("td",[s._v("分组名字")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("''")])]),s._v(" "),a("tr",[a("td",[s._v("fields")]),s._v(" "),a("td",[s._v("该组内所包含的字段集合")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("[]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("field")]),s._v(" "),a("td",[s._v("字段数据")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("事件名")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("参数1")]),s._v(" "),a("th",[s._v("参数2")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("submit")]),s._v(" "),a("td",[s._v("表单校验通过后触发此事件")]),s._v(" "),a("td",[s._v("e - 事件对象")]),s._v(" "),a("td",[s._v("model 值")])]),s._v(" "),a("tr",[a("td",[s._v("reset")]),s._v(" "),a("td",[s._v("表单重置事件")]),s._v(" "),a("td",[s._v("e - 事件对象")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("validate")]),s._v(" "),a("td",[s._v("表单校验事件")]),s._v(" "),a("td",[s._v("参数结构如下："),a("br"),s._v("{"),a("br"),s._v("validity,"),a("br"),s._v(" valid,"),a("br"),s._v(" invalid,"),a("br"),s._v(" dirty,"),a("br"),s._v(" firstInvalidFieldIndex"),a("br"),s._v("}")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("valid")]),s._v(" "),a("td",[s._v("表单校验成功触发")]),s._v(" "),a("td",[s._v("validity 校验结果")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("invalid")]),s._v(" "),a("td",[s._v("表单校验失败触发")]),s._v(" "),a("td",[s._v("validity 校验结果")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[a("code",{pre:!0},[s._v("validate")]),s._v(" 事件的参数")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("validity")]),s._v(" "),a("td",[s._v("校验结果")]),s._v(" "),a("td",[s._v("Object")])]),s._v(" "),a("tr",[a("td",[s._v("valid")]),s._v(" "),a("td",[s._v("校验合法，如果还没校验则为 undefined，一旦校验则为 true 或 false")]),s._v(" "),a("td",[s._v("Boolean/Undefined")])]),s._v(" "),a("tr",[a("td",[s._v("invalid")]),s._v(" "),a("td",[s._v("校验不合法，如果还没校验则为 undefined，一旦校验则为 true 或 false")]),s._v(" "),a("td",[s._v("Boolean")])]),s._v(" "),a("tr",[a("td",[s._v("dirty")]),s._v(" "),a("td",[s._v("表单处于 dirty 状态，也就意味着数据源发生了变化")]),s._v(" "),a("td",[s._v("Boolean")])]),s._v(" "),a("tr",[a("td",[s._v("firstInvalidFieldIndex")]),s._v(" "),a("td",[s._v("第一个校验不合法的字段索引值")]),s._v(" "),a("td",[s._v("Number")])])])]),s._v(" "),a("ul",[a("li",[a("p",[s._v("校验结果 "),a("code",{pre:!0},[s._v("validity")]),s._v(" 对象")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("valid")]),s._v(" "),a("td",[s._v("校验是否合法")]),s._v(" "),a("td",[s._v("Boolean/Undefined")])]),s._v(" "),a("tr",[a("td",[s._v("result")]),s._v(" "),a("td",[s._v("校验结果，类似于："),a("br"),s._v("{"),a("br"),s._v(" required: {"),a("br"),s._v("  valid: false,"),a("br"),s._v("  invalid: true,"),a("br"),s._v("  message: 'Required.'"),a("br"),s._v(" }"),a("br"),s._v("}")]),s._v(" "),a("td",[s._v("Object")])]),s._v(" "),a("tr",[a("td",[s._v("dirty")]),s._v(" "),a("td",[s._v("数据是否是已经更新过的")]),s._v(" "),a("td",[s._v("Boolean")])])])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("方法名")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("返回值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("submit")]),s._v(" "),a("td",[s._v("提交表单")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("reset")]),s._v(" "),a("td",[s._v("重置表单")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("validate(cb)")]),s._v(" "),a("td",[s._v("校验表单")]),s._v(" "),a("td",[s._v("cb: 校验完成后回调函数，主要用于异步校验场景，调用参数为 valid 的值")]),s._v(" "),a("td",[s._v("如果支持 Promise 的话返回值是 Promise 对象（只有 resolved 状态，值为 valid），否则 undefined")])])])])}]}},"3rpl":function(s,t,a){var v=a("VU/8")(null,a("0xxl"),null,null,null);s.exports=v.exports},XO3d:function(s,t,a){s.exports=a("3rpl")}});