{"id":31525,"date":"2024-11-25T12:32:02","date_gmt":"2024-11-25T04:32:02","guid":{"rendered":"https:\/\/fwq.ai\/blog\/31525\/"},"modified":"2024-11-25T12:32:02","modified_gmt":"2024-11-25T04:32:02","slug":"vue%e5%81%9a%e5%87%ba%e5%b8%a6%e6%9c%89%e6%95%b0%e6%8d%ae%e6%94%b6%e9%9b%86%e3%80%81%e6%a0%a1%e9%aa%8c%e5%92%8c%e6%8f%90%e4%ba%a4%e5%8a%9f%e8%83%bd%e8%a1%a8%e5%8d%95","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/31525\/","title":{"rendered":"VUE\u505a\u51fa\u5e26\u6709\u6570\u636e\u6536\u96c6\u3001\u6821\u9a8c\u548c\u63d0\u4ea4\u529f\u80fd\u8868\u5355"},"content":{"rendered":"

\u8fd9\u6b21\u7ed9\u5927\u5bb6\u5e26\u6765VUE\u505a\u51fa\u5e26\u6709\u6570\u636e\u6536\u96c6\u3001\u6821\u9a8c\u548c\u63d0\u4ea4\u529f\u80fd\u8868\u5355\uff0cVUE\u505a\u51fa\u5e26\u6709\u6570\u636e\u6536\u96c6\u3001\u6821\u9a8c\u548c\u63d0\u4ea4\u529f\u80fd\u8868\u5355\u7684\u6709\u54ea\u4e9b\uff0c\u4e0b\u9762\u5c31\u662f\u5b9e\u6218\u6848\u4f8b\uff0c\u4e00\u8d77\u6765\u770b\u4e00\u4e0b\u3002<\/p>\n

\u793a\u4f8b<\/p>\n

\"VUE\u505a\u51fa\u5e26\u6709\u6570\u636e\u6536\u96c6\u3001\u6821\u9a8c\u548c\u63d0\u4ea4\u529f\u80fd\u8868\u5355\u63d2\u56fe\"<\/p>\n

https:\/\/raw.githubusercontent.com\/xaboy\/form-create\/dev\/images\/sample110.jpg<\/p>\n

\u5b89\u88c5<\/strong><\/p>\n

npm install form-create<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
OR<\/strong><\/p>\n
git clone https:\/\/github.com\/xaboy\/form-create.git\r\ncd form-create\r\nnpm install<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u5f15\u5165<\/strong><\/p>\n
<!-- import Vue -->\r\n<script src=\"node_modules\/vue\/dist\/vue.min.js\"><\/script>\r\n<!-- import iview -->\r\n<link rel=\"stylesheet\" href=\"node_modules\/iview\/dist\/styles\/iview.css\" rel=\"external nofollow\" >\r\n<script src=\"node_modules\/iview\/dist\/iview.min.js\"><\/script>\r\n<!-- \u7701\u5e02\u533a\u4e09\u7ea7\u8054\u52a8json\u6570\u636e -->\r\n<script src=\"\/district\/province_city_area.js\"><\/script>\r\n<!-- \u6a21\u62df\u6570\u636e -->\r\n<script src=\"mock.js\"><\/script>\r\n<!-- import formCreate -->\r\n<script src=\"dist\/form-create.min.js\"><\/script><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u6ce8\u610f! iview\u7248\u672c\u8bf7>=2.9.2,\u5426\u5219\u53ef\u80fd\u5b58\u5728\u95ee\u9898<\/p>\n
\u4f7f\u7528<\/strong><\/p>\n
let rules = window.mock;\r\nnew Vue({\r\n mounted:function(){\r\n let $f = this.$formCreate(mock,\r\n   {\r\n    onSubmit:function (formData) {\r\n     console.log(formData);\r\n     $f.submitStatus({loading:true});\r\n   }\r\n  });\r\n  \/\/\u52a8\u6001\u6dfb\u52a0\u8868\u5355\u5143\u7d20\r\n  $f.append($r,'goods_name');\r\n }\r\n})<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
$formCreate \u53c2\u6570<\/p>\n
    \n
  • \n
    rules \u8868\u5355\u751f\u6210\u89c4\u5219 [inputRule,selectRule,…]<\/p>\n<\/li>\n
  • \n
    options \u521d\u59cb\u5316\u914d\u7f6e\u53c2\u6570 (\u8be6\u7ec6\u89c1\u5e95\u90e8 createOptions)<\/p>\n<\/li>\n
  • \n
    $f \u5b9e\u4f8b\u65b9\u6cd5<\/p>\n<\/li>\n
  • \n
    formData() \u83b7\u53d6\u8868\u5355\u7684value<\/p>\n<\/li>\n
  • \n
    getValue(field) \u83b7\u53d6\u6307\u5b9a\u5b57\u6bb5\u7684value<\/p>\n<\/li>\n
  • \n
    changeField(field,value) \u4fee\u6539\u6307\u5b9a\u5b57\u6bb5\u7684value<\/p>\n<\/li>\n
  • \n
    resetFields() \u91cd\u7f6e\u8868\u5355<\/p>\n<\/li>\n
  • \n
    destroy() \u9500\u6bc1\u8868\u5355<\/p>\n<\/li>\n
  • \n
    removeField(field) \u5220\u9664\u6307\u5b9a\u5b57\u6bb5<\/p>\n<\/li>\n
  • \n
    fields() \u83b7\u5f97\u8868\u5355\u6240\u6709\u5b57\u6bb5\u540d\u79f0<\/p>\n<\/li>\n
  • \n
    submit() \u8868\u5355\u9a8c\u8bc1\u901a\u8fc7\u540e\u63d0\u4ea4\u8868\u5355,\u89e6\u53d1onSubmit\u4e8b\u4ef6<\/p>\n<\/li>\n
  • \n
    validate(successFn,errorFn) \u8868\u5355\u9a8c\u8bc1,\u5982\u679c\u9a8c\u8bc1\u901a\u8fc7\u6267\u884csuccessFn,\u672a\u901a\u8fc7\u5219\u6267\u884cerrorFn<\/p>\n<\/li>\n
  • \n
    validateField(field,callback) \u8868\u5355\u9a8c\u8bc1\u6307\u5b9a\u5b57\u6bb5<\/p>\n<\/li>\n<\/ul>\n
     $f.validateField(field,(errMsg)=>{\r\n  if(errMsg){\r\n   \/\/TODO \u9a8c\u8bc1\u672a\u901a\u8fc7\r\n  }else{\r\n   \/\/TODO \u9a8c\u8bc1\u901a\u8fc7\r\n  }\r\n });<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \n
    • \n
      prepend(rule,field = undefined) \u5728field\u7684\u5b57\u6bb5\u4e4b\u524d\u8f93\u5165\u6307\u5b9a\u8868\u5355\u5143\u7d20,\u4e0d\u4f20\u5165field\u9ed8\u8ba4\u5728\u7b2c\u4e00\u4e2a<\/p>\n<\/li>\n<\/ul>\n
      $f.prepend({\r\n  type:\"input\",\r\n  title:\"\u5546\u54c1\u7b80\u4ecb\",\r\n  field:\"goods_info\",\r\n  value:\"\",\r\n  props: {\r\n   \"type\": \"text\",\r\n   \"placeholder\": \"\u8bf7\u8f93\u5165\u5546\u54c1\u7b80\u4ecb\",\r\n  },\r\n  validate:[\r\n   { required: true, message: '\u8bf7\u8f93\u5165\u5546\u54c1\u7b80\u4ecb', trigger: 'blur' },\r\n  ],\r\n });<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      append(rule,field = undefined) \u5728field\u7684\u5b57\u6bb5\u4e4b\u524d\u8f93\u5165\u6307\u5b9a\u8868\u5355\u5143\u7d20,\u4e0d\u4f20\u5165field\u9ed8\u8ba4\u5728\u6700\u540e\u4e00\u4e2a<\/p>\n
      $f.append({\r\n  type:\"input\",\r\n  title:\"\u5546\u54c1\u7b80\u4ecb\",\r\n  field:\"goods_info\",\r\n  value:\"\",\r\n  props: {\r\n   \"type\": \"text\",\r\n   \"placeholder\": \"\u8bf7\u8f93\u5165\u5546\u54c1\u7b80\u4ecb\",\r\n  },\r\n  validate:[\r\n   { required: true, message: '\u8bf7\u8f93\u5165\u5546\u54c1\u7b80\u4ecb', trigger: 'blur' },\r\n  ],\r\n });<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
        \n
      • \n
        submitStatus(props) \u4fee\u6539\u8868\u5355\u63d0\u4ea4\u6309\u94ae\u72b6\u6001<\/p>\n<\/li>\n<\/ul>\n
        $f.submitStatus({\r\n  \/\/\u6309\u94ae\u7c7b\u578b\uff0c\u53ef\u9009\u503c\u4e3aprimary\u3001ghost\u3001dashed\u3001text\u3001info\u3001success\u3001warning\u3001error\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n  type:\"primary\",\r\n  \/\/\u6309\u94ae\u5927\u5c0f\uff0c\u53ef\u9009\u503c\u4e3alarge\u3001small\u3001default\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n  size:\"large\",\r\n  \/\/\u6309\u94ae\u5f62\u72b6\uff0c\u53ef\u9009\u503c\u4e3acircle\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n  shape:undefined,\r\n  \/\/\u5f00\u542f\u540e\uff0c\u6309\u94ae\u7684\u957f\u5ea6\u4e3a 100%\r\n  long:true,\r\n  \/\/\u8bbe\u7f6ebutton\u539f\u751f\u7684type\uff0c\u53ef\u9009\u503c\u4e3abutton\u3001submit\u3001reset\r\n  htmlType:\"button\",\r\n  \/\/\u8bbe\u7f6e\u6309\u94ae\u4e3a\u7981\u7528\u72b6\u6001\r\n  disabled:false,\r\n  \/\/\u8bbe\u7f6e\u6309\u94ae\u7684\u56fe\u6807\u7c7b\u578b\r\n  icon:\"ios-upload\",\r\n  \/\/\u6309\u94ae\u6587\u5b57\u63d0\u793a\r\n  innerText:\"\u63d0\u4ea4\",\r\n  \/\/\u8bbe\u7f6e\u6309\u94ae\u4e3a\u52a0\u8f7d\u4e2d\u72b6\u6001\r\n  loading:false\r\n })<\/pre>\n
         \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          \n
        • \n
          btn.loading() \u8ba9\u8868\u5355\u63d0\u4ea4\u6309\u94ae\u8fdb\u5165loading\u72b6\u6001<\/p>\n<\/li>\n
        • \n
          btn.finish() \u8ba9\u8868\u5355\u63d0\u4ea4\u6309\u94ae\u6062\u590d\u6b63\u5e38\u72b6\u6001<\/p>\n<\/li>\n<\/ul>\n
          rules \u8868\u5355\u5143\u7d20\u89c4\u5219<\/strong><\/p>\n
          hidden \u9690\u85cf\u5b57\u6bb5<\/p>\n
          hiddenRule:\r\n{\r\n type:\"hidden\",\/\/\u5fc5\u586b!\r\n \/\/\u5b57\u6bb5\u540d\u79f0\r\n field:\"id\", \/\/\u5fc5\u586b!\r\n \/\/input\u503c\r\n value:\"14\" \/\/\u5fc5\u586b!\r\n}<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          input \u8f93\u5165\u6846<\/p>\n
          inputRule :\r\n{\r\n  type:\"input\",\/\/\u5fc5\u586b! \r\n  \/\/label\u540d\u79f0\r\n  title:\"\u5546\u54c1\u540d\u79f0\",\/\/\u5fc5\u586b!\r\n  \/\/\u5b57\u6bb5\u540d\u79f0\r\n  field:\"goods_name\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c\r\n  value:\"iphone 7\",\r\n  props: {\r\n   \/\/\u8f93\u5165\u6846\u7c7b\u578b\uff0c\u53ef\u9009\u503c\u4e3a text\u3001password\u3001textarea\u3001url\u3001email\u3001date\r\n   \"type\": \"text\", \/\/\u5fc5\u586b!\r\n   \/\/\u662f\u5426\u663e\u793a\u6e05\u7a7a\u6309\u94ae\r\n   \"clearable\":false, \r\n   \/\/\u8bbe\u7f6e\u8f93\u5165\u6846\u4e3a\u7981\u7528\u72b6\u6001\r\n   \"disabled\": false, \r\n   \/\/\u8bbe\u7f6e\u8f93\u5165\u6846\u4e3a\u53ea\u8bfb\r\n   \"readonly\": false,\r\n   \/\/\u6587\u672c\u57df\u9ed8\u8ba4\u884c\u6570\uff0c\u4ec5\u5728 textarea \u7c7b\u578b\u4e0b\u6709\u6548\r\n   \"rows\": 4, \r\n   \/\/\u81ea\u9002\u5e94\u5185\u5bb9\u9ad8\u5ea6\uff0c\u4ec5\u5728 textarea \u7c7b\u578b\u4e0b\u6709\u6548\uff0c\u53ef\u4f20\u5165\u5bf9\u8c61\uff0c\u5982 { minRows: 2, maxRows: 6 }\r\n   \"autosize\": false, \r\n   \/\/\u5c06\u7528\u6237\u7684\u8f93\u5165\u8f6c\u6362\u4e3a Number \u7c7b\u578b\r\n   \"number\": false, \r\n   \/\/\u81ea\u52a8\u83b7\u53d6\u7126\u70b9\r\n   \"autofocus\": false, \r\n   \/\/\u539f\u751f\u7684\u81ea\u52a8\u5b8c\u6210\u529f\u80fd\uff0c\u53ef\u9009\u503c\u4e3a off \u548c on\r\n   \"autocomplete\": \"off\", \r\n   \/\/\u5360\u4f4d\u6587\u672c\r\n   \"placeholder\": \"\u8bf7\u8f93\u5165\u5546\u54c1\u540d\u79f0\", \r\n   \/\/\u8f93\u5165\u6846\u5c3a\u5bf8\uff0c\u53ef\u9009\u503c\u4e3alarge\u3001small\u3001default\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n   \"size\": \"default\",\r\n   \/\/\u539f\u751f\u7684 spellcheck \u5c5e\u6027\r\n   \"spellcheck\": false,\r\n  },\r\n  event:{\r\n   \/\/\u6309\u4e0b\u56de\u8f66\u952e\u65f6\u89e6\u53d1\r\n   enter:(event)=>{},\r\n   \/\/\u8bbe\u7f6e icon \u5c5e\u6027\u540e\uff0c\u70b9\u51fb\u56fe\u6807\u65f6\u89e6\u53d1\r\n   click:(event)=>{},\r\n   \/\/\u6570\u636e\u6539\u53d8\u65f6\u89e6\u53d1\r\n   change:(event)=>{},\r\n   \/\/\u8f93\u5165\u6846\u805a\u7126\u65f6\u89e6\u53d1\r\n   focus:(event)=>{},\r\n   \/\/\u8f93\u5165\u6846\u5931\u53bb\u7126\u70b9\u65f6\u89e6\u53d1\r\n   blur:(event)=>{},\r\n   \/\/\u539f\u751f\u7684 keyup \u4e8b\u4ef6\r\n   keyup:(event)=>{},\r\n   \/\/\u539f\u751f\u7684 keydown \u4e8b\u4ef6\r\n   keydown:(event)=>{},\r\n   \/\/\u539f\u751f\u7684 keypress \u4e8b\u4ef6\r\n   keypress:(event)=>{},\r\n  },\r\n  validate:[\r\n   { required: true, message: '\u8bf7\u8f93\u5165goods_name', trigger: 'blur' },\r\n  ],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          validate \u8868\u5355\u9a8c\u8bc1\u89c4\u5219\uff0c\u5177\u4f53\u914d\u7f6e\u67e5\u770b : https:\/\/github.com\/yiminghe\/async-validator<\/p>\n
          radio \u5355\u9009\u6846<\/strong><\/p>\n
          radioRule :\r\n{\r\n  type:\"radio\",\/\/\u5fc5\u586b!\r\n  \/\/label\u540d\u79f0\r\n  title:\"\u662f\u5426\u5305\u90ae\",\/\/\u5fc5\u586b!\r\n  \/\/\u5b57\u6bb5\u540d\u79f0\r\n  field:\"is_postage\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c\r\n  value:\"0\",\r\n  \/\/\u53ef\u9009\u53c2\u6570\r\n  options:[\r\n   {value:\"0\",label:\"\u4e0d\u5305\u90ae\",disabled:false},\r\n   {value:\"1\",label:\"\u5305\u90ae\",disabled:true},\r\n  ],\/\/\u5fc5\u586b!\r\n  props: {\r\n   \/\/\u53ef\u9009\u503c\u4e3a button \u6216\u4e0d\u586b\uff0c\u4e3a button \u65f6\u4f7f\u7528\u6309\u94ae\u6837\u5f0f\r\n   \"type\":undefined, \r\n   \/\/\u5355\u9009\u6846\u7684\u5c3a\u5bf8\uff0c\u53ef\u9009\u503c\u4e3a large\u3001small\u3001default \u6216\u8005\u4e0d\u8bbe\u7f6e\r\n   \"size\":\"default\", \r\n   \/\/\u662f\u5426\u5782\u76f4\u6392\u5217\uff0c\u6309\u94ae\u6837\u5f0f\u4e0b\u65e0\u6548\r\n   \"vertical\":false, \r\n  },\r\n  event:{\r\n   \/\/\u5728\u9009\u9879\u72b6\u6001\u53d1\u751f\u6539\u53d8\u65f6\u89e6\u53d1\uff0c\u8fd4\u56de\u5f53\u524d\u72b6\u6001\u3002\u901a\u8fc7\u4fee\u6539\u5916\u90e8\u7684\u6570\u636e\u6539\u53d8\u65f6\u4e0d\u4f1a\u89e6\u53d1\r\n   change:(...arg)=>{},\r\n  },\r\n  validate:[],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          checkbox \u590d\u9009\u6846<\/strong><\/p>\n
          checkboxRule :\r\n{\r\n  type:\"checkbox\",\/\/\u5fc5\u586b!\r\n  \/\/label\u540d\u79f0\r\n  title:\"\u6807\u7b7e\",\/\/\u5fc5\u586b!\r\n  \/\/\u5b57\u6bb5\u540d\u79f0\r\n  field:\"label\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c\r\n  value:[\r\n   \"1\",\"2\",\"3\"\r\n  ],\r\n  \/\/\u53ef\u9009\u53c2\u6570\r\n  options:[\r\n   {value:\"1\",label:\"\u597d\u7528\",disabled:true},\r\n   {value:\"2\",label:\"\u65b9\u4fbf\",disabled:false},\r\n   {value:\"3\",label:\"\u5b9e\u7528\",disabled:false},\r\n   {value:\"4\",label:\"\u6709\u6548\",disabled:false},\r\n  ],\/\/\u5fc5\u586b!\r\n  props: {\r\n   \/\/\u591a\u9009\u6846\u7ec4\u7684\u5c3a\u5bf8\uff0c\u53ef\u9009\u503c\u4e3a large\u3001small\u3001default \u6216\u8005\u4e0d\u8bbe\u7f6e\r\n   \"size\":\"default\", \r\n  },\r\n  event:{\r\n   \/\/\u53ea\u5728\u5355\u72ec\u4f7f\u7528\u65f6\u6709\u6548\u3002\u5728\u9009\u9879\u72b6\u6001\u53d1\u751f\u6539\u53d8\u65f6\u89e6\u53d1\uff0c\u901a\u8fc7\u4fee\u6539\u5916\u90e8\u7684\u6570\u636e\u6539\u53d8\u65f6\u4e0d\u4f1a\u89e6\u53d1\r\n   change:(...arg)=>{},\r\n  },\r\n  validate:[],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          select \u9009\u62e9\u5668<\/strong><\/p>\n
          selectRule :\r\n{\r\n  type: \"select\",\/\/\u5fc5\u586b!\r\n  field: \"cate_id\",\/\/\u5fc5\u586b!\r\n  title: \"\u4ea7\u54c1\u5206\u7c7b\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c\r\n  value: [\"104\",\"105\"],\r\n  \/\/\u53ef\u9009\u53c2\u6570\r\n  options: [\r\n   {\"value\": \"104\", \"label\": \"\u751f\u6001\u852c\u83dc\", \"disabled\": false},\r\n   {\"value\": \"105\", \"label\": \"\u65b0\u9c9c\u6c34\u679c\", \"disabled\": false},\r\n  ],\/\/\u5fc5\u586b!\r\n  props: {\r\n    \/\/\u662f\u5426\u652f\u6301\u591a\u9009\r\n   \"multiple\": true, \r\n   \/\/\u662f\u5426\u53ef\u4ee5\u6e05\u7a7a\u9009\u9879\uff0c\u53ea\u5728\u5355\u9009\u65f6\u6709\u6548\r\n   \"clearable\": false,\r\n   \/\/\u662f\u5426\u652f\u6301\u641c\u7d22\r\n   \"filterable\": true, \r\n   \/\/ \u6682\u4e0d\u652f\u6301\u8fdc\u7a0b\u641c\u7d22\r\n   \/\/ \"remote\": false, \/\/\u662f\u5426\u4f7f\u7528\u8fdc\u7a0b\u641c\u7d22\r\n   \/\/ \"remote-method\":Function, \/\/\u8fdc\u7a0b\u641c\u7d22\u7684\u65b9\u6cd5\r\n   \/\/ \"loading\": false, \/\/\u5f53\u524d\u662f\u5426\u6b63\u5728\u8fdc\u7a0b\u641c\u7d22\r\n   \/\/ \"loading-text\": \"\u52a0\u8f7d\u4e2d\", \/\/\u8fdc\u7a0b\u641c\u7d22\u4e2d\u7684\u6587\u5b57\u63d0\u793a\r\n   \/\/\u9009\u62e9\u6846\u5927\u5c0f\uff0c\u53ef\u9009\u503c\u4e3alarge\u3001small\u3001default\u6216\u8005\u4e0d\u586b\r\n   \"size\":\"default\", \r\n   \/\/\u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57\r\n   \"placeholder\": \"\u8bf7\u9009\u62e9\", \r\n    \/\/\u5f53\u4e0b\u62c9\u5217\u8868\u4e3a\u7a7a\u65f6\u663e\u793a\u7684\u5185\u5bb9\r\n   \"not-found-text\": \"\u65e0\u5339\u914d\u6570\u636e\",\r\n   \/\/\u5f39\u7a97\u7684\u5c55\u5f00\u65b9\u5411\uff0c\u53ef\u9009\u503c\u4e3a bottom \u548c top\r\n   \"placement\": \"bottom\", \r\n   \/\/\u662f\u5426\u7981\u7528\r\n   \"disabled\": false, \r\n  },\r\n  event:{\r\n   \/\/\u9009\u4e2d\u7684Option\u53d8\u5316\u65f6\u89e6\u53d1\uff0c\u8fd4\u56de value\r\n   change:(checked)=>{},\r\n   \/\/\u641c\u7d22\u8bcd\u6539\u53d8\u65f6\u89e6\u53d1\r\n   'query-change':(keyword)=>{},\r\n  },\r\n  validate:[],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          switch \u5f00\u5173<\/strong><\/p>\n
          switchRule :\r\n{\r\n  type:\"switch\",\/\/\u5fc5\u586b!\r\n  \/\/label\u540d\u79f0\r\n  title:\"\u662f\u5426\u4e0a\u67b6\",\/\/\u5fc5\u586b!\r\n  \/\/\u5b57\u6bb5\u540d\u79f0\r\n  field:\"is_show\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c\r\n  value:\"1\",\r\n  props: {\r\n   \/\/\u5f00\u5173\u7684\u5c3a\u5bf8\uff0c\u53ef\u9009\u503c\u4e3alarge\u3001small\u3001default\u6216\u8005\u4e0d\u5199\u3002\u5efa\u8bae\u5f00\u5173\u5982\u679c\u4f7f\u7528\u4e862\u4e2a\u6c49\u5b57\u7684\u6587\u5b57\uff0c\u4f7f\u7528 large\u3002\r\n   \"size\":\"default\", \r\n   \/\/\u7981\u7528\u5f00\u5173\r\n   \"disabled\":false,\r\n   \/\/\u9009\u4e2d\u65f6\u7684\u503c\uff0c\u5f53\u4f7f\u7528\u7c7b\u4f3c 1 \u548c 0 \u6765\u5224\u65ad\u662f\u5426\u9009\u4e2d\u65f6\u4f1a\u5f88\u6709\u7528\r\n   \"trueValue\":\"1\", \r\n   \/\/\u6ca1\u6709\u9009\u4e2d\u65f6\u7684\u503c\uff0c\u5f53\u4f7f\u7528\u7c7b\u4f3c 1 \u548c 0 \u6765\u5224\u65ad\u662f\u5426\u9009\u4e2d\u65f6\u4f1a\u5f88\u6709\u7528\r\n   \"falseValue\":\"0\", \r\n  },\r\n  slot: {\r\n   \/\/\u81ea\u5b9a\u4e49\u663e\u793a\u6253\u5f00\u65f6\u7684\u5185\u5bb9\r\n   open:\"\u4e0a\u67b6\", \r\n   \/\/\u81ea\u5b9a\u4e49\u663e\u793a\u5173\u95ed\u65f6\u7684\u5185\u5bb9\r\n   close:\"\u4e0b\u67b6\", \r\n  },\r\n  event:{\r\n   \/\/\u5f00\u5173\u53d8\u5316\u65f6\u89e6\u53d1\uff0c\u8fd4\u56de\u5f53\u524d\u7684\u72b6\u6001 0 | 1\r\n   change:(bool)=>{},\r\n  },\r\n  validate:[],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          DatePicker <\/strong><\/p>\n
          DatePickerRule :\r\n{\r\n  type: \"DatePicker\",\/\/\u5fc5\u586b!\r\n  field: \"section_day\",\/\/\u5fc5\u586b!\r\n  title: \"\u6d3b\u52a8\u65e5\u671f\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c, type\u4e3adaterange,datetimerange value\u4e3a\u6570\u7ec4 [start_value,end_value]\r\n  value: ['2018-02-20', new Date()], \r\n  props: {\r\n   \/\/\u663e\u793a\u7c7b\u578b\uff0c\u53ef\u9009\u503c\u4e3a date\u3001daterange\u3001datetime\u3001datetimerange\u3001year\u3001month\r\n   \"type\": \"datetimerange\",\/\/\u5fc5\u586b!\r\n   \/\/\u5c55\u793a\u7684\u65e5\u671f\u683c\u5f0f\r\n   \"format\": \"yyyy-MM-dd HH:mm:ss\", \r\n   \/\/\u65e5\u671f\u9009\u62e9\u5668\u51fa\u73b0\u7684\u4f4d\u7f6e\uff0c\u53ef\u9009\u503c\u4e3atoptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end\r\n   \"placement\": \"bottom-start\", \r\n   \/\/\u5360\u4f4d\u6587\u672c\r\n   \"placeholder\":\"\u8bf7\u9009\u62e9\u83b7\u5f97\u65f6\u95f4\", \r\n   \/\/\u662f\u5426\u663e\u793a\u5e95\u90e8\u63a7\u5236\u680f\uff0c\u5f00\u542f\u540e\uff0c\u9009\u62e9\u5b8c\u65e5\u671f\uff0c\u9009\u62e9\u5668\u4e0d\u4f1a\u4e3b\u52a8\u5173\u95ed\uff0c\u9700\u7528\u6237\u786e\u8ba4\u540e\u624d\u53ef\u5173\u95ed\r\n   \"confirm\":false, \r\n   \/\/\u5c3a\u5bf8\uff0c\u53ef\u9009\u503c\u4e3alarge\u3001small\u3001default\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n   \"size\":\"default\", \r\n   \/\/\u662f\u5426\u7981\u7528\u9009\u62e9\u5668\r\n   \"disabled\":false, \r\n   \/\/\u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae\r\n   \"clearable\":true, \r\n   \/\/\u5b8c\u5168\u53ea\u8bfb\uff0c\u5f00\u542f\u540e\u4e0d\u4f1a\u5f39\u51fa\u9009\u62e9\u5668\r\n   \"readonly\":false, \r\n   \/\/\u6587\u672c\u6846\u662f\u5426\u53ef\u4ee5\u8f93\u5165\r\n   \"editable\":false, \r\n  },\r\n  event:{\r\n   \/\/\u65e5\u671f\u53d1\u751f\u53d8\u5316\u65f6\u89e6\u53d1,\u5df2\u7ecf\u683c\u5f0f\u5316\u540e\u7684\u65e5\u671f\uff0c\u6bd4\u5982 2016-01-01\r\n   change:(value)=>{},\r\n   \/\/\u5f39\u51fa\u65e5\u5386\u548c\u5173\u95ed\u65e5\u5386\u65f6\u89e6\u53d1 true | false\r\n   'open-change':(bool)=>{},\r\n   \/\/\u5728 confirm \u6a21\u5f0f\u6216 clearable = true \u65f6\u6709\u6548\uff0c\u5728\u6e05\u7a7a\u65e5\u671f\u65f6\u89e6\u53d1\r\n   clear:(...arg)=>{},\r\n  },\r\n  validate:[],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          TimePicker <\/strong><\/p>\n
          TimePickerRule :\r\n{\r\n  type: \"TimePicker\",\/\/\u5fc5\u586b!\r\n  field: \"section_time\",\/\/\u5fc5\u586b!\r\n  title: \"\u6d3b\u52a8\u65f6\u95f4\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c, type\u4e3atimerange value\u4e3a\u6570\u7ec4 [start_value,end_value]\r\n  value: [], \r\n  props: {\r\n   \/\/\u663e\u793a\u7c7b\u578b\uff0c\u53ef\u9009\u503c\u4e3a time\u3001timerange\r\n   \"type\": \"timerange\", \/\/\u5fc5\u586b!\r\n   \/\/\u5c55\u793a\u7684\u65f6\u95f4\u683c\u5f0f\r\n   \"format\": \"HH:mm:ss\", \r\n   \/\/\u4e0b\u62c9\u5217\u8868\u7684\u65f6\u95f4\u95f4\u9694\uff0c\u6570\u7ec4\u7684\u4e09\u9879\u5206\u522b\u5bf9\u5e94\u5c0f\u65f6\u3001\u5206\u949f\u3001\u79d2\u3002\u4f8b\u5982\u8bbe\u7f6e\u4e3a [1, 15] \u65f6\uff0c\u5206\u949f\u4f1a\u663e\u793a\uff1a00\u300115\u300130\u300145\u3002\r\n   \"steps\": [], \r\n   \/\/\u65f6\u95f4\u9009\u62e9\u5668\u51fa\u73b0\u7684\u4f4d\u7f6e\uff0c\u53ef\u9009\u503c\u4e3atoptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end\r\n   \"placement\": \"bottom-start\", \r\n   \/\/\u5360\u4f4d\u6587\u672c\r\n   \"placeholder\":\"\u8bf7\u9009\u62e9\u83b7\u5f97\u65f6\u95f4\", \r\n   \/\/\u662f\u5426\u663e\u793a\u5e95\u90e8\u63a7\u5236\u680f\uff0c\u5f00\u542f\u540e\uff0c\u9009\u62e9\u5b8c\u65e5\u671f\uff0c\u9009\u62e9\u5668\u4e0d\u4f1a\u4e3b\u52a8\u5173\u95ed\uff0c\u9700\u7528\u6237\u786e\u8ba4\u540e\u624d\u53ef\u5173\u95ed\r\n   \"confirm\":false, \r\n   \/\/\u5c3a\u5bf8\uff0c\u53ef\u9009\u503c\u4e3alarge\u3001small\u3001default\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n   \"size\":\"default\",\r\n   \/\/\u662f\u5426\u7981\u7528\u9009\u62e9\u5668\r\n   \"disabled\":false, \r\n   \/\/\u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae\r\n   \"clearable\":true, \r\n   \/\/\u5b8c\u5168\u53ea\u8bfb\uff0c\u5f00\u542f\u540e\u4e0d\u4f1a\u5f39\u51fa\u9009\u62e9\u5668\r\n   \"readonly\":false, \r\n   \/\/\u6587\u672c\u6846\u662f\u5426\u53ef\u4ee5\u8f93\u5165\r\n   \"editable\":false, \r\n  },\r\n  event:{\r\n   \/\/\u65f6\u95f4\u53d1\u751f\u53d8\u5316\u65f6\u89e6\u53d1 \u5df2\u7ecf\u683c\u5f0f\u5316\u540e\u7684\u65f6\u95f4\uff0c\u6bd4\u5982 09:41:00\r\n   change:(checked)=>{},\r\n   \/\/\u5f39\u51fa\u6d6e\u5c42\u548c\u5173\u95ed\u6d6e\u5c42\u65f6\u89e6\u53d1 true | false\r\n   'open-change':(bool)=>{},\r\n   \/\/\u5728\u6e05\u7a7a\u65e5\u671f\u65f6\u89e6\u53d1\r\n   clear:(...arg)=>{},\r\n  },\r\n  validate:[],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          InputNumber \u6570\u5b57\u8f93\u5165\u6846<\/strong><\/p>\n
          InputNumberRule :\r\n{\r\n  type: \"InputNumber\",\/\/\u5fc5\u586b!\r\n  field: \"sort\",\/\/\u5fc5\u586b!\r\n  title: \"\u6392\u5e8f\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c\r\n  value: 1,\r\n  props: {\r\n   \/\/\u6700\u5927\u503c\r\n   \"max\": undefined, \r\n   \/\/\u6700\u5c0f\u503c\r\n   \"min\": undefined, \r\n   \/\/\u6bcf\u6b21\u6539\u53d8\u7684\u6b65\u4f10\uff0c\u53ef\u4ee5\u662f\u5c0f\u6570\r\n   \"step\": 1, \r\n   \/\/\u8f93\u5165\u6846\u5c3a\u5bf8\uff0c\u53ef\u9009\u503c\u4e3alarge\u3001small\u3001default\u6216\u8005\u4e0d\u586b\r\n   \"size\":\"default\", \r\n   \/\/\u8bbe\u7f6e\u7981\u7528\u72b6\u6001\r\n   \"disabled\":false, \r\n   \/\/\u662f\u5426\u8bbe\u7f6e\u4e3a\u53ea\u8bfb\r\n   \"readonly\":false, \r\n   \/\/\u662f\u5426\u53ef\u7f16\u8f91\r\n   \"editable\":true, \r\n   \/\/\u6570\u503c\u7cbe\u5ea6\r\n   \"precision\":0, \r\n  },\r\n  event:{\r\n   \/\/\u6570\u503c\u6539\u53d8\u65f6\u7684\u56de\u8c03\uff0c\u8fd4\u56de\u5f53\u524d\u503c\r\n   change:(value)=>{},\r\n   \/\/\u805a\u7126\u65f6\u89e6\u53d1\r\n   focus:(event)=>{},\r\n   \/\/\u5931\u7126\u65f6\u89e6\u53d1\r\n   blur:(event)=>{},\r\n  },\r\n  validate:[],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          ColorPicker \u989c\u8272\u9009\u62e9\u5668<\/strong><\/p>\n
          ColorPickerRule :\r\n{\r\n  type: \"ColorPicker\",\/\/\u5fc5\u586b!\r\n  field: \"color\",\/\/\u5fc5\u586b!\r\n  title: \"\u989c\u8272\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c\r\n  value: '#ff7271', \r\n  props: {\r\n   \/\/\u662f\u5426\u652f\u6301\u900f\u660e\u5ea6\u9009\u62e9\r\n   \"alpha\": false, \r\n   \/\/\u662f\u5426\u652f\u6301\u8272\u5f69\u9009\u62e9\r\n   \"hue\": true, \r\n   \/\/\u662f\u5426\u663e\u793a\u63a8\u8350\u7684\u989c\u8272\u9884\u8bbe\r\n   \"recommend\": false, \r\n   \/\/\u5c3a\u5bf8\uff0c\u53ef\u9009\u503c\u4e3alarge\u3001small\u3001default\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n   \"size\":\"default\", \r\n   \/\/\u81ea\u5b9a\u4e49\u989c\u8272\u9884\u8bbe\r\n   \"colors\":[], \r\n   \/\/\u989c\u8272\u7684\u683c\u5f0f\uff0c\u53ef\u9009\u503c\u4e3a hsl\u3001hsv\u3001hex\u3001rgb,\u5f00\u542f alpha \u65f6\u4e3a rgb\uff0c\u5176\u5b83\u4e3a hex\r\n   \"format\":\"hex\", \r\n  },\r\n  event:{\r\n   \/\/\u5f53\u7ed1\u5b9a\u503c\u53d8\u5316\u65f6\u89e6\u53d1\uff0c\u8fd4\u56de\u5f53\u524d\u503c\r\n   change:(color)=>{},\r\n   \/\/\u805a\u7126\u65f6\u89e6\u53d1 \u9762\u677f\u4e2d\u5f53\u524d\u663e\u793a\u7684\u989c\u8272\u53d1\u751f\u6539\u53d8\u65f6\u89e6\u53d1\r\n   'active-change':(color)=>{},\r\n  },\r\n  validate:[],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          Cascader \u591a\u7ea7\u8054\u52a8<\/strong><\/p>\n
          CascaderRule:\r\n{\r\n  type:\"cascader\",\/\/\u5fc5\u586b!\r\n  title:\"\u6240\u5728\u533a\u57df\",\/\/\u5fc5\u586b!\r\n  field:\"address\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c\r\n  value:['\u9655\u897f\u7701','\u897f\u5b89\u5e02','\u65b0\u57ce\u533a'],\r\n  props:{\r\n   \/\/\u53ef\u9009\u9879\u7684\u6570\u636e\u6e90\uff0c\u683c\u5f0f\u53c2\u7167\u793a\u4f8b\u8bf4\u660e\r\n   data:window.province || [],\/\/\u5fc5\u586b!\r\n   \/\/\u9009\u62e9\u540e\u5c55\u793a\u7684\u51fd\u6570\uff0c\u7528\u4e8e\u81ea\u5b9a\u4e49\u663e\u793a\u683c\u5f0f\r\n   renderFormat:label => label.join(' \/ '),\r\n   \/\/\u662f\u5426\u7981\u7528\u9009\u62e9\u5668\r\n   disabled:false,\r\n   \/\/\u662f\u5426\u652f\u6301\u6e05\u9664\r\n   clearable:true,\r\n   \/\/\u8f93\u5165\u6846\u5360\u4f4d\u7b26\r\n   placeholder:'\u8bf7\u9009\u62e9',\r\n   \/\/\u6b21\u7ea7\u83dc\u5355\u5c55\u5f00\u65b9\u5f0f\uff0c\u53ef\u9009\u503c\u4e3a click \u6216 hover\r\n   trigger:'click',\r\n   \/\/\u5f53\u6b64\u9879\u4e3a true \u65f6\uff0c\u70b9\u9009\u6bcf\u7ea7\u83dc\u5355\u9009\u9879\u503c\u90fd\u4f1a\u53d1\u751f\u53d8\u5316\uff0c\u5177\u4f53\u89c1\u4e0a\u9762\u7684\u793a\u4f8b\r\n   changeOnSelect:false,\r\n   \/\/\u8f93\u5165\u6846\u5927\u5c0f\uff0c\u53ef\u9009\u503c\u4e3alarge\u548csmall\u6216\u8005\u4e0d\u586b\r\n   size:undefined,\r\n   \/\/\u52a8\u6001\u83b7\u53d6\u6570\u636e\uff0c\u6570\u636e\u6e90\u9700\u6807\u8bc6 loading\r\n   loadData:()=>{},\r\n   \/\/\u662f\u5426\u652f\u6301\u641c\u7d22\r\n   filterable:false,\r\n   \/\/\u5f53\u641c\u7d22\u5217\u8868\u4e3a\u7a7a\u65f6\u663e\u793a\u7684\u5185\u5bb9\r\n   notFoundText:'\u65e0\u5339\u914d\u6570\u636e',\r\n   \/\/\u662f\u5426\u5c06\u5f39\u5c42\u653e\u7f6e\u4e8e body \u5185\uff0c\u5728 Tabs\u3001\u5e26\u6709 fixed \u7684 Table \u5217\u5185\u4f7f\u7528\u65f6\uff0c\u5efa\u8bae\u6dfb\u52a0\u6b64\u5c5e\u6027\uff0c\u5b83\u5c06\u4e0d\u53d7\u7236\u7ea7\u6837\u5f0f\u5f71\u54cd\uff0c\u4ece\u800c\u8fbe\u5230\u66f4\u597d\u7684\u6548\u679c\r\n   transfer:false,\r\n  },\r\n  event:{\r\n   \/\/\u9009\u62e9\u5b8c\u6210\u540e\u7684\u56de\u8c03\uff0c\u8fd4\u56de\u503c value \u5373\u5df2\u9009\u503c value\uff0cselectedData \u4e3a\u5df2\u9009\u9879\u7684\u5177\u4f53\u6570\u636e\r\n   change:(value, selectedData)=>{},\r\n   \/\/\u5c55\u5f00\u548c\u5173\u95ed\u5f39\u7a97\u65f6\u89e6\u53d1\r\n   'visible-change':bool=>{}\r\n  },\r\n  validate:[],\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          Upload \u4e0a\u4f20<\/strong><\/p>\n
          UploadRule :\r\n{\r\n  type: \"Upload\",\/\/\u5fc5\u586b!\r\n  field: \"pic\",\/\/\u5fc5\u586b!\r\n  title: \"\u8f6e\u64ad\u56fe\",\/\/\u5fc5\u586b!\r\n  \/\/input\u503c,\u5f53maxLength\u7b49\u4e0e1\u65f6\u503c\u4e3a\u5b57\u7b26\u4e32,\u5927\u4e8e1\u65f6\u503c\u4e3a\u6570\u7ec4\r\n  value: ['http:\/\/img1.touxiang.cn\/uploads\/20131030\/30-075657_191.jpg','http:\/\/img1.touxiang.cn\/uploads\/20131030\/30-075657_191.jpg'], \/\/input\u503c\r\n  props: {\r\n   \/\/\u4e0a\u4f20\u63a7\u4ef6\u7684\u7c7b\u578b\uff0c\u53ef\u9009\u503c\u4e3a select\uff08\u70b9\u51fb\u9009\u62e9\uff09\uff0cdrag\uff08\u652f\u6301\u62d6\u62fd\uff09\r\n   \"type\":\"select\", \/\/\u5fc5\u586b!\r\n   \/\/\u4e0a\u4f20\u6587\u4ef6\u7c7b\u578b\uff0c\u53ef\u9009\u503c\u4e3a image\uff08\u56fe\u7247\u4e0a\u4f20\uff09\uff0cfile\uff08\u6587\u4ef6\u4e0a\u4f20\uff09\r\n   \"uploadType\":\"image\", \/\/\u5fc5\u586b!\r\n   \/\/\u4e0a\u4f20\u7684\u5730\u5740\r\n   \"action\": \"\", \/\/\u5fc5\u586b! \r\n   \/\/\u4e0a\u4f20\u7684\u6587\u4ef6\u5b57\u6bb5\u540d\r\n   \"name\":\"\", \r\n   \/\/\u4e0a\u4f20\u65f6\u9644\u5e26\u7684\u989d\u5916\u53c2\u6570\r\n   \"data\":{}, \r\n   \/\/\u8bbe\u7f6e\u4e0a\u4f20\u7684\u8bf7\u6c42\u5934\u90e8\r\n   \"headers\": {}, \r\n   \/\/\u662f\u5426\u652f\u6301\u591a\u9009\u6587\u4ef6\r\n   \"multiple\": true,\r\n   \/\/\u652f\u6301\u53d1\u9001 cookie \u51ed\u8bc1\u4fe1\u606f\r\n   \"withCredentials\":false, \r\n   \/\/\u4e0d\u652f\u6301\r\n   \/\/ \"showUploadList\":false, \/\/\u662f\u5426\u663e\u793a\u5df2\u4e0a\u4f20\u6587\u4ef6\u5217\u8868\r\n   \/\/ \"defaultFileList\":[], \/\/ \u9ed8\u8ba4\u5df2\u4e0a\u4f20\u7684\u6587\u4ef6\u5217\u8868\r\n   \/\/\u63a5\u53d7\u4e0a\u4f20\u7684\u6587\u4ef6\u7c7b\u578b\r\n   \"accept\":\"\",\r\n   \/\/\u652f\u6301\u7684\u6587\u4ef6\u7c7b\u578b\uff0c\u4e0e accept \u4e0d\u540c\u7684\u662f\uff0cformat \u662f\u8bc6\u522b\u6587\u4ef6\u7684\u540e\u7f00\u540d\uff0caccept \u4e3a input \u6807\u7b7e\u539f\u751f\u7684 accept \u5c5e\u6027\uff0c\u4f1a\u5728\u9009\u62e9\u6587\u4ef6\u65f6\u8fc7\u6ee4\uff0c\u53ef\u4ee5\u4e24\u8005\u7ed3\u5408\u4f7f\u7528\r\n   \"format\":[], \r\n   \/\/\u6587\u4ef6\u5927\u5c0f\u9650\u5236\uff0c\u5355\u4f4d kb\r\n   \"maxSize\":undefined, \r\n   \/\/\u53ef\u4e0a\u4f20\u6587\u4ef6\u6570\u91cf\r\n   \"maxLength\":1,\r\n   \/\/\u4e0a\u4f20\u6587\u4ef6\u4e4b\u524d\u7684\u94a9\u5b50\uff0c\u53c2\u6570\u4e3a\u4e0a\u4f20\u7684\u6587\u4ef6\uff0c\u82e5\u8fd4\u56de false \u6216\u8005 Promise \u5219\u505c\u6b62\u4e0a\u4f20\r\n   \"beforeUpload\":()=>{}, \r\n   \/\/\u6587\u4ef6\u4e0a\u4f20\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a event, file, fileList\r\n   \"onProgress\":()=>{}, \r\n   \/\/\u6587\u4ef6\u4e0a\u4f20\u6210\u529f\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a response, file, fileList,\u82e5\u9700\u6709\u628a\u6587\u4ef6\u6dfb\u52a0\u5230\u6587\u4ef6\u5217\u8868\u4e2d,\u5728\u51fd\u6570\u503c\u8fd4\u56de\u5373\u53ef\r\n   \"onSuccess\":function () {\r\n    return 'http:\/\/img1.touxiang.cn\/uploads\/20131030\/30-075657_191.jpg';\r\n   }, \/\/\u5fc5\u586b!\r\n   \/\/\u6587\u4ef6\u4e0a\u4f20\u5931\u8d25\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a error, file, fileList\r\n   \"onError\":(error, file, fileList)=>{}, \r\n   \/\/\u70b9\u51fb\u5df2\u4e0a\u4f20\u7684\u6587\u4ef6\u94fe\u63a5\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a file\uff0c \u53ef\u4ee5\u901a\u8fc7 file.response \u62ff\u5230\u670d\u52a1\u7aef\u8fd4\u56de\u6570\u636e\r\n   \"onPreview\":()=>{}, \r\n   \/\/\u6587\u4ef6\u5217\u8868\u79fb\u9664\u6587\u4ef6\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a file, fileList\r\n   \"onRemove\":()=>{}, \r\n   \/\/\u6587\u4ef6\u683c\u5f0f\u9a8c\u8bc1\u5931\u8d25\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a file, fileList\r\n   \"onFormatError\":()=>{}, \r\n   \/\/\u6587\u4ef6\u8d85\u51fa\u6307\u5b9a\u5927\u5c0f\u9650\u5236\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a file, fileList\r\n   \"onExceededSize\":()=>{}, \r\n   \/\/\u8f85\u52a9\u64cd\u4f5c\u6309\u94ae\u7684\u56fe\u6807 ,\u8bbe\u7f6e\u4e3afalse\u5c06\u4e0d\u663e\u793a\r\n   handleIcon:'ionic',\r\n   \/\/\u70b9\u51fb\u8f85\u52a9\u64cd\u4f5c\u6309\u94ae\u4e8b\u4ef6\r\n   onHandle:(src)=>{},\r\n   \/\/\u662f\u5426\u53ef\u5220\u9664,\u8bbe\u7f6e\u4e3afalse\u662f\u4e0d\u663e\u793a\u5220\u9664\u6309\u94ae\r\n   allowRemove:true,\r\n  },\r\n }<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          accept \u6587\u4ef6\u7c7b\u578b\uff1a https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input#attr-accept<\/p>\n
          \u5168\u5c40\u914d\u7f6e createOptions<\/p>\n
          {\r\n \/\/\u63d2\u5165\u8282\u70b9,\u9ed8\u8ba4document.body\r\n el:null,\r\n \/\/form\u914d\u7f6e\r\n form:{\r\n  \/\/\u662f\u5426\u5f00\u542f\u884c\u5185\u8868\u5355\u6a21\u5f0f\r\n  inline:false,\r\n  \/\/\u8868\u5355\u57df\u6807\u7b7e\u7684\u4f4d\u7f6e\uff0c\u53ef\u9009\u503c\u4e3a left\u3001right\u3001top\r\n  labelPosition:'right',\r\n  \/\/\u8868\u5355\u57df\u6807\u7b7e\u7684\u5bbd\u5ea6\uff0c\u6240\u6709\u7684 FormItem \u90fd\u4f1a\u7ee7\u627f Form \u7ec4\u4ef6\u7684 label-width \u7684\u503c\r\n  labelWidth:125,\r\n  \/\/\u662f\u5426\u663e\u793a\u6821\u9a8c\u9519\u8bef\u4fe1\u606f\r\n  showMessage:true,\r\n  \/\/\u539f\u751f\u7684 autocomplete \u5c5e\u6027\uff0c\u53ef\u9009\u503c\u4e3a off \u6216 on\r\n  autocomplete:'off',\r\n },\r\n \/\/\u6587\u4ef6\u4e0a\u4f20\u5168\u5c40\u914d\u7f6e\r\n upload:{\r\n  \/\/\u4e0a\u4f20\u6587\u4ef6\u4e4b\u524d\u7684\u94a9\u5b50\uff0c\u53c2\u6570\u4e3a\u4e0a\u4f20\u7684\u6587\u4ef6\uff0c\u82e5\u8fd4\u56de false \u6216\u8005 Promise \u5219\u505c\u6b62\u4e0a\u4f20\r\n  beforeUpload:()=>{},\r\n  \/\/\u6587\u4ef6\u4e0a\u4f20\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a event, file, fileList\r\n  onProgress:(event, file, fileList)=>{},\r\n  \/\/\u6587\u4ef6\u4e0a\u4f20\u6210\u529f\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a response, file, fileList,\u82e5\u9700\u6709\u628a\u6587\u4ef6\u6dfb\u52a0\u5230\u6587\u4ef6\u5217\u8868\u4e2d,\u5728\u51fd\u6570\u503c\u8fd4\u56de\u5373\u53ef\r\n  onSuccess:(response, file, fileList)=>{\r\n   \/\/ return 'filePath';\r\n  },\r\n  \/\/\u6587\u4ef6\u4e0a\u4f20\u5931\u8d25\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a error, file, fileList\r\n  onError:(error, file, fileList)=>{},\r\n  \/\/\u70b9\u51fb\u5df2\u4e0a\u4f20\u7684\u6587\u4ef6\u94fe\u63a5\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a file\uff0c \u53ef\u4ee5\u901a\u8fc7 file.response \u62ff\u5230\u670d\u52a1\u7aef\u8fd4\u56de\u6570\u636e\r\n  onPreview:(file)=>{},\r\n  \/\/\u6587\u4ef6\u5217\u8868\u79fb\u9664\u6587\u4ef6\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a file, fileList\r\n  onRemove:(file, fileList)=>{},\r\n  \/\/\u6587\u4ef6\u683c\u5f0f\u9a8c\u8bc1\u5931\u8d25\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a file, fileList\r\n  onFormatError:(file, fileList)=>{},\r\n  \/\/\u6587\u4ef6\u8d85\u51fa\u6307\u5b9a\u5927\u5c0f\u9650\u5236\u65f6\u7684\u94a9\u5b50\uff0c\u8fd4\u56de\u5b57\u6bb5\u4e3a file, fileList\r\n  onExceededSize:(file, fileList)=>{},\r\n  \/\/\u8f85\u52a9\u64cd\u4f5c\u6309\u94ae\u7684\u56fe\u6807 ,\u8bbe\u7f6e\u4e3afalse\u5c06\u4e0d\u663e\u793a\r\n  handleIcon:'ios-eye-outline',\r\n  \/\/\u70b9\u51fb\u8f85\u52a9\u64cd\u4f5c\u6309\u94ae\u4e8b\u4ef6\r\n  onHandle:(src)=>{},\r\n  \/\/\u662f\u5426\u53ef\u5220\u9664,\u8bbe\u7f6e\u4e3afalse\u662f\u4e0d\u663e\u793a\u5220\u9664\u6309\u94ae\r\n  allowRemove:true,\r\n },\r\n \/\/\u8868\u5355\u63d0\u4ea4\u4e8b\u4ef6\r\n onSubmit:(formData)=>{},\r\n \/\/\u63d0\u4ea4\u6309\u94ae\u914d\u7f6e,\u8bbe\u7f6e\u4e3afalse\u65f6\u4e0d\u663e\u793a\u6309\u94ae\r\n submitBtn:{\r\n  \/\/\u6309\u94ae\u7c7b\u578b\uff0c\u53ef\u9009\u503c\u4e3aprimary\u3001ghost\u3001dashed\u3001text\u3001info\u3001success\u3001warning\u3001error\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n  type:\"primary\",\r\n  \/\/\u6309\u94ae\u5927\u5c0f\uff0c\u53ef\u9009\u503c\u4e3alarge\u3001small\u3001default\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n  size:\"large\",\r\n  \/\/\u6309\u94ae\u5f62\u72b6\uff0c\u53ef\u9009\u503c\u4e3acircle\u6216\u8005\u4e0d\u8bbe\u7f6e\r\n  shape:undefined,\r\n  \/\/\u5f00\u542f\u540e\uff0c\u6309\u94ae\u7684\u957f\u5ea6\u4e3a 100%\r\n  long:true,\r\n  \/\/\u8bbe\u7f6ebutton\u539f\u751f\u7684type\uff0c\u53ef\u9009\u503c\u4e3abutton\u3001submit\u3001reset\r\n  htmlType:\"button\",\r\n  \/\/\u8bbe\u7f6e\u6309\u94ae\u4e3a\u7981\u7528\u72b6\u6001\r\n  disabled:false,\r\n  \/\/\u8bbe\u7f6e\u6309\u94ae\u7684\u56fe\u6807\u7c7b\u578b\r\n  icon:\"ios-upload\",\r\n  \/\/\u6309\u94ae\u6587\u5b57\u63d0\u793a\r\n  innerText:\"\u63d0\u4ea4\",\r\n  \/\/\u8bbe\u7f6e\u6309\u94ae\u4e3a\u52a0\u8f7d\u4e2d\u72b6\u6001\r\n  loading:false,\r\n }\r\n}<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          \u76f8\u4fe1\u770b\u4e86\u672c\u6587\u6848\u4f8b\u4f60\u5df2\u7ecf\u638c\u63e1\u4e86\u65b9\u6cd5\uff0c\u66f4\u591a\u7cbe\u5f69\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n
          \u63a8\u8350\u9605\u8bfb\uff1a<\/p>\n
          <\/p>\n
          <\/p>\n
          \u4ee5\u4e0a\u5c31\u662fVUE\u505a\u51fa\u5e26\u6709\u6570\u636e\u6536\u96c6\u3001\u6821\u9a8c\u548c\u63d0\u4ea4\u529f\u80fd\u8868\u5355\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
          \u8fd9\u6b21\u7ed9\u5927\u5bb6\u5e26\u6765VUE\u505a\u51fa\u5e26\u6709\u6570\u636e\u6536\u96c6\u3001\u6821\u9a8c\u548c\u63d0\u4ea4\u529f\u80fd\u8868\u5355\uff0cVUE\u505a\u51fa\u5e26\u6709\u6570\u636e\u6536\u96c6\u3001\u6821\u9a8c\u548c\u63d0\u4ea4\u529f\u80fd\u8868\u5355\u7684\u6709\u54ea\u4e9b\uff0c\u4e0b\u9762\u5c31\u662f\u5b9e\u6218\u6848\u4f8b\uff0c\u4e00\u8d77\u6765\u770b\u4e00\u4e0b\u3002 \u793a\u4f8b https:\/\/raw.githubusercontent.com\/xaboy\/form-create\/dev\/images\/sample110.jpg \u5b89\u88c5 npm install form-create \u767b\u5f55\u540e\u590d\u5236 OR git clone https:\/\/github.com\/xaboy\/form-create.git cd form-create npm install \u767b\u5f55\u540e\u590d\u5236 \u5f15\u5165 <!– import Vue –> <script src=”node_modules\/vue\/dist\/vue.min.js”><\/script> <!– import iview –> <link rel=”stylesheet” href=”node_modules\/iview\/dist\/styles\/iview.css” rel=”external nofollow” > <script src=”node_modules\/iview\/dist\/iview.min.js”><\/script> <!– \u7701\u5e02\u533a\u4e09\u7ea7\u8054\u52a8json\u6570\u636e –> <script src=”\/district\/province_city_area.js”><\/script> <!– \u6a21\u62df\u6570\u636e –> <script src=”mock.js”><\/script> <!– import formCreate –> <script src=”dist\/form-create.min.js”><\/script> \u767b\u5f55\u540e\u590d\u5236 \u6ce8\u610f! iview\u7248\u672c\u8bf7>=2.9.2,\u5426\u5219\u53ef\u80fd\u5b58\u5728\u95ee\u9898 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-31525","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=31525"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31525\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=31525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=31525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=31525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}