text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-49aab359"],{"1d2b":function(t,a,e){},4802:function(t,a,e){"use strict";var s=e("1d2b"),n=e.n(s);n.a},5319:function(t,a,e){"use strict";var s=e("d784"),n=e("825a"),i=e("7b0b"),l=e("50c4"),r=e("a691"),o=e("1d80"),d=e("8aa5"),m=e("14c3"),c=Math.max,u=Math.min,p=Math.floor,h=/\$([$&'`]|\d\d?|<[^>]*>)/g,v=/\$([$&'`]|\d\d?)/g,f=function(t){return void 0===t?t:String(t)};s("replace",2,(function(t,a,e){return[function(e,s){var n=o(this),i=void 0==e?void 0:e[t];return void 0!==i?i.call(e,n,s):a.call(String(n),e,s)},function(t,i){var o=e(a,t,this,i);if(o.done)return o.value;var p=n(t),h=String(this),v="function"===typeof i;v||(i=String(i));var g=p.global;if(g){var b=p.unicode;p.lastIndex=0}var R=[];while(1){var x=m(p,h);if(null===x)break;if(R.push(x),!g)break;var w=String(x[0]);""===w&&(p.lastIndex=d(h,l(p.lastIndex),b))}for(var _="",y=0,D=0;D<R.length;D++){x=R[D];for(var k=String(x[0]),S=c(u(r(x.index),h.length),0),T=[],q=1;q<x.length;q++)T.push(f(x[q]));var O=x.groups;if(v){var $=[k].concat(T,S,h);void 0!==O&&$.push(O);var j=String(i.apply(void 0,$))}else j=s(k,h,S,T,O,i);S>=y&&(_+=h.slice(y,S)+j,y=S+k.length)}return _+h.slice(y)}];function s(t,e,s,n,l,r){var o=s+t.length,d=n.length,m=v;return void 0!==l&&(l=i(l),m=h),a.call(r,m,(function(a,i){var r;switch(i.charAt(0)){case"$":return"$";case"&":return t;case"`":return e.slice(0,s);case"'":return e.slice(o);case"<":r=l[i.slice(1,-1)];break;default:var m=+i;if(0===m)return a;if(m>d){var c=p(m/10);return 0===c?a:c<=d?void 0===n[c-1]?i.charAt(1):n[c-1]+i.charAt(1):a}r=n[m-1]}return void 0===r?"":r}))}}))},"8c94":function(t,a,e){"use strict";e.r(a);var s=function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("article",[e("h1",[t._v("表单")]),t._m(0),e("o-tips",{attrs:{warning:""}},[t._v(" 只有含有 "),e("code",[t._v("name")]),t._v(" 属性的Form组件会被Opal捕获。 ")]),e("h2",[t._v("通用表单")]),e("div",{staticClass:"wrapper"},[e("o-form",{ref:"form",on:{validate:t.setValidationResults},model:{value:t.formData,callback:function(a){t.formData=a},expression:"formData"}},[e("div",{staticClass:"row"},[e("o-input",{attrs:{name:"mail",placeholder:"邮箱，用于登录及安全验证",width:"350",datalist:t.mailDatalist,mismatched:t.validationResults.mail&&"mismatched"===t.validationResults.mail.status,clearable:""}}),t.validationResults.mail&&"mismatched"===t.validationResults.mail.status?e("p",{staticClass:"validation",domProps:{textContent:t._s(t.validationResults.mail.text)}}):t._e()],1),e("div",{staticClass:"row"},[e("o-input",{attrs:{name:"pass",placeholder:"密码，由6-20个字符组成，区分大小写",width:"350",datalist:t.mailDatalist,mismatched:t.validationResults.pass&&"mismatched"===t.validationResults.pass.status,password:""}}),t.validationResults.pass&&"mismatched"===t.validationResults.pass.status?e("p",{staticClass:"validation",domProps:{textContent:t._s(t.validationResults.pass.text)}}):t._e()],1),e("div",{staticClass:"row"},[e("o-input",{attrs:{name:"cfmpass",placeholder:"请再次输入密码，确保两次输入一致",width:"350",datalist:t.mailDatalist,mismatched:t.validationResults.cfmpass&&"mismatched"===t.validationResults.cfmpass.status,password:""}}),t.validationResults.cfmpass&&"mismatched"===t.validationResults.cfmpass.status?e("p",{staticClass:"validation",domProps:{textContent:t._s(t.validationResults.cfmpass.text)}}):t._e()],1),e("div",{staticClass:"row"},[e("o-input",{attrs:{name:"phone",placeholder:"常用手机号码，用于接收验证码",width:"350",datalist:t.mailDatalist,mismatched:t.validationResults.phone&&"mismatched"===t.validationResults.phone.status,clearable:""}}),t.validationResults.phone&&"mismatched"===t.validationResults.phone.status?e("p",{staticClass:"validation",domProps:{textContent:t._s(t.validationResults.phone.text)}}):t._e()],1),e("o-checkbox",{attrs:{name:"agree",price:!0}},[t._v(" 我已阅读并同意 "),e("router-link",{attrs:{to:{name:"form"},target:"_blank"}},[t._v("服务声明和隐私条款")])],1),e("div",{staticStyle:{"margin-top":"20px"}},[e("o-button",{staticStyle:{width:"170px","margin-right":"10px"},on:{click:t.getValidate}},[t._v(" 注册 ")]),e("o-button",{staticStyle:{width:"170px"},attrs:{type:"plain","native-type":"reset"}},[t._v(" 重置 ")])],1)],1)],1),e("o-code",{attrs:{text:t.demo1Code,lang:"html"}}),e("h2",[t._v("Methods")]),e("o-table",{attrs:{data:t.Methods}}),e("h2",[t._v("Events")]),e("o-table",{attrs:{data:t.Events}})],1)},n=[function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("p",[t._v(" 由Form组件构成，用以收集和校验数据。"),e("br"),t._v(" Opal 使用 "),e("code",[e("a",{attrs:{href:"https://github.com/asahiP/Navy",target:"_blank"}},[t._v("Navy")])]),t._v(" 对表单数据进行校验。你可以访问上面的链接来查阅规则语法。 ")])}],i=(e("4160"),e("b64b"),e("d3b7"),e("ac1f"),e("5319"),e("1276"),e("159b"),e("9f12")),l=e("53fe"),r=e("8b83"),o=e("c65a"),d=e("c03e"),m=e("9ab4"),c=e("60a3"),u=function(t){function a(){var t;return Object(i["a"])(this,a),t=Object(r["a"])(this,Object(o["a"])(a).apply(this,arguments)),t.demo1Code='\n    <template>\n      <o-form v-model="formData" @validate="setValidationResults" ref="form">\n        <div class="row">\n          <o-input\n            name="mail"\n            placeholder="邮箱，用于登录及安全验证"\n            width="350"\n            :datalist="mailDatalist"\n            :mismatched="validationResults.mail && validationResults.mail.status === \'mismatched\'"\n            clearable\n          />\n          <p\n            class="validation"\n            v-if="validationResults.mail && validationResults.mail.status === \'mismatched\'"\n            v-text="validationResults.mail.text"\n          ></p>\n        </div>\n        <div class="row">\n          <o-input\n            name="pass"\n            placeholder="密码，由6-20个字符组成，区分大小写"\n            width="350"\n            :datalist="mailDatalist"\n            :mismatched="validationResults.pass && validationResults.pass.status === \'mismatched\'"\n            password\n          />\n          <p\n            class="validation"\n            v-if="validationResults.pass && validationResults.pass.status === \'mismatched\'"\n            v-text="validationResults.pass.text"\n          ></p>\n        </div>\n        <div class="row">\n          <o-input\n            name="cfmpass"\n            placeholder="请再次输入密码，确保两次输入一致"\n            width="350"\n            :datalist="mailDatalist"\n            :mismatched="validationResults.cfmpass && validationResults.cfmpass.status === \'mismatched\'"\n            password\n          />\n          <p\n            class="validation"\n            v-if="validationResults.cfmpass && validationResults.cfmpass.status === \'mismatched\'"\n            v-text="validationResults.cfmpass.text"\n          ></p>\n        </div>\n        <div class="row">\n          <o-input\n            name="phone"\n            placeholder="常用手机号码，用于接收验证码"\n            width="350"\n            :datalist="mailDatalist"\n            :mismatched="validationResults.phone && validationResults.phone.status === \'mismatched\'"\n            clearable\n          />\n          <p\n            class="validation"\n            v-if="validationResults.phone && validationResults.phone.status === \'mismatched\'"\n            v-text="validationResults.phone.text"\n          ></p>\n        </div>\n          <o-checkbox name="agree" :price="true">\n            我已阅读并同意 <a href="/#/component/form" target="_blank">服务声明和隐私条款</a>\n          </o-checkbox>\n        <div style="margin-top: 20px;">\n          <o-button style="width: 170px; margin-right: 10px" @click="getValidate">\n            注册\n          </o-button>\n          <o-button type="plain" native-type="reset" style="width: 170px">\n            重置\n          </o-button>\n        </div>\n      </o-form>\n    </template>\n    <code>\n      export default {\n        data () {\n          return {\n            formData: {},\n            validationResults: {},\n          }\n        },\n\n        computed: {\n          rules () {\n            let { pass } = this.formData\n\n            return {\n              mail: [\n                { rule: \'Required string\', mismatchedText: \'邮箱地址不能为空\' },\n                { rule: \'String mail\', mismatchedText: \'请输入正确的邮箱地址\' },\n              ],\n\n              pass: [\n                { rule: \'Required string\', mismatchedText: \'密码不能为空\' },\n                { rule: \'String minlen: 5\', mismatchedText: \'密码长度必须大于等于6\' },\n                { rule: \'String maxlen: 21\', mismatchedText: \'密码长度必须小于等于20\' },\n              ],\n\n              cfmpass: pass\n                ? [\n                  { rule: \'Required string\', mismatchedText: \'请再次输入密码\' },\n                  { rule: `String equal: \\`${pass}\\``, mismatchedText: \'两次密码不一致\' },\n                ]\n                : [\n                  { rule: \'Required string\', mismatchedText: \'请再次输入密码\' },\n                ]\n              ,\n\n              phone: [\n                { rule: \'Required string\', mismatchedText: \'手机号码不能为空\' },\n                { rule: \'String phone\', mismatchedText: \'请输入正确的手机号码\' },\n              ]\n            }\n          }\n        },\n\n        methods: {\n          mailDatalist () {\n            let { mail } = this.formData\n            return new Promise((res, rej) => {\n              let address = mail ? mail.split(\'@\')[0] : \'\'\n\n              if (address) {\n                let datalist = []\n                let template = [\n                  \'@qq.com\',\n                  \'@126.com\',\n                  \'@163.com\',\n                  \'@gmail.com\',\n                  \'@outlook.com\',\n                ]\n\n                for (let i of template) {\n                  datalist.push({ value: address + i })\n                }\n\n                res(datalist)\n              } else {\n                res([])\n              }\n            })\n          },\n\n          setValidationResults (callback) {\n            this.validationResults = callback(this.rules)\n          },\n\n          getValidate () {\n            let template = {\n              mail: \'\',\n              pass: \'\',\n              cfmpass: \'\',\n              phone: \'\',\n              agree: false,\n            }\n            let { rules, formData, $refs } = this\n            this.validationResults = $refs.form.getValidate(rules, Object.assign(template, formData))\n\n            let canSubmit = true\n            let { validationResults, $alert } = this\n            \n            Object.keys(validationResults).forEach(name => {\n              if (validationResults[name].status === \'mismatched\') {\n                canSubmit = false\n              }\n            })\n\n            if (canSubmit) {\n              if (formData.agree && formData.agree[0]) {\n                $alert({ type: \'success\', msg: \'注册成功\' })\n              } else {\n                $alert({ type: \'warning\', msg: \'请先阅读服务声明和隐私条款\' })\n              }\n            }\n          }\n        },\n      }\n    </code>\n  '.replace(/code/g,"script"),t.formData={},t.validationResults={},t.Methods={head:[{prop:"name",label:"Name",width:150},{prop:"description",label:"Description",width:300},{prop:"argument",label:"Argument",width:350},{prop:"return",label:"Return",width:200}],body:[{name:"getValidate",description:"对整个表单进行校验的方法，参数为校验用的规则，返回值为校验的结果。",argument:"Object: { [name]: [{ rule, matchedText, mismatchedText }...] }",return:"Object: { [name]: { status, rule, text } }"}]},t.Events={head:[{prop:"name",label:"Name",width:150},{prop:"description",label:"Description",width:300},{prop:"argument",label:"Argument",width:549}],body:[{name:"validate",description:"表单内任意组件更新时触发，事件触发后会传入表单的 getValidate 方法",argument:"getValidate: (rules: Object) => (results: Object)"}]},t}return Object(d["a"])(a,t),Object(l["a"])(a,[{key:"mailDatalist",value:function(){var t=this.formData.mail;return new Promise((function(a,e){var s=t?t.split("@")[0]:"";if(s){for(var n=[],i=["@qq.com","@126.com","@163.com","@gmail.com","@outlook.com"],l=0,r=i;l<r.length;l++){var o=r[l];n.push({value:s+o})}a(n)}else a([])}))}},{key:"setValidationResults",value:function(t){this.validationResults=t(this.rules)}},{key:"getValidate",value:function(){var t={mail:"",pass:"",cfmpass:"",phone:"",agree:!1},a=this.rules,e=this.formData,s=this.$refs;this.validationResults=s.form.getValidate(a,Object.assign(t,e));var n=!0,i=this.validationResults,l=this.$alert;Object.keys(i).forEach((function(t){"mismatched"===i[t].status&&(n=!1)})),n&&(e.agree&&e.agree[0]?l({type:"success",msg:"注册成功"}):l({type:"warning",msg:"请先阅读服务声明和隐私条款"}))}},{key:"rules",get:function(){var t=this.formData.pass;return{mail:[{rule:"Required string",mismatchedText:"邮箱地址不能为空"},{rule:"String mail",mismatchedText:"请输入正确的邮箱地址"}],pass:[{rule:"Required string",mismatchedText:"密码不能为空"},{rule:"String minlen: 5",mismatchedText:"密码长度必须大于等于6"},{rule:"String maxlen: 21",mismatchedText:"密码长度必须小于等于20"}],cfmpass:t?[{rule:"Required string",mismatchedText:"请再次输入密码"},{rule:"String equal: `".concat(t,"`"),mismatchedText:"两次密码不一致"}]:[{rule:"Required string",mismatchedText:"请再次输入密码"}],phone:[{rule:"Required string",mismatchedText:"手机号码不能为空"},{rule:"String phone",mismatchedText:"请输入正确的手机号码"}]}}}]),a}(c["b"]);u=m["a"]([c["a"]],u);var p=u,h=p,v=(e("4802"),e("2877")),f=Object(v["a"])(h,s,n,!1,null,"2f698013",null);a["default"]=f.exports}}]);
  //# sourceMappingURL=chunk-49aab359.d7069bc7.js.map