@uiw/doc/web/static/js/3451.cdb7ba80.chunk.js

UIW documentation website.

(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3451],{4934:e=>{function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=()=>[],n.resolve=n,n.id=4934,e.exports=n},5301:(e,n,t)=>{"use strict";t.d(n,{Z:()=>_});var r=t(8573),o=t(6320),i=t(8563),l=t(7622),a=t(7937);const u={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var d=t(4760);function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:n}=e,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,d.jsxs)("div",{className:u.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,d.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,d.jsx)("br",{}),(0,d.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,d.jsx)(a.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,d.jsx)(a.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,d.jsx)(a.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,d.jsx)(a.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,d.jsx)(a.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const f=o.ZP.Preview,s=o.ZP.Code,p=o.ZP.Toolbar,m=e=>{var n,t;let{node:l,components:a,data:u,...c}=e;const m=(0,r.useRef)(null),{headings:_,headingsList:v,...b}=c;(0,r.useEffect)((()=>{if(m.current){const e=m.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(m.current,e)}}),[m]);const g=null===l||void 0===l||null===(n=l.position)||void 0===n?void 0:n.start.line,j=null===l||void 0===l||null===(t=l.data)||void 0===t?void 0:t.meta,h=(0,i.Mx)(j)||String(g),C=a["".concat(h)];if(h&&"function"===typeof C){const e=u[h].value||"",n=(0,i.aE)(j||"");return(0,d.jsxs)(o.ZP,{ref:m,children:[(0,d.jsx)(f,{style:{background:n.bg||"transparent"},children:(0,d.jsx)(C,{})}),(0,d.jsx)(p,{text:e,children:n.title||"Example"}),(0,d.jsx)(s,{children:(0,d.jsx)("pre",{...b})})]})}return(0,d.jsx)("code",{...b})};function _(e){return(0,d.jsxs)(r.Fragment,{children:[(0,d.jsx)(l.Z,{className:u.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:n=>(0,d.jsx)(m,{...e,...n})}}),(0,d.jsx)(c,{path:e.path})]})}},6529:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>l});const r={components:{19:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement("div",null,n.default.createElement(r.PinCode,{autoFocus:!0,value:["","","","",""],onChange:function(e){return console.log(e)}}))}}(),36:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function l(e,n,t){return(n=function(e){var n=function(e,n){if("object"!==o(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===o(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}return function(){return n.default.createElement("div",null,n.default.createElement(r.Form,{resetOnSubmit:!1,onSubmitError:function(e){return e.filed?function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}({},e.filed):null},onSubmit:function(e){e.initial;var n=e.current,t={};if(0===n.pinCode.join("").length&&(t.pinCode="\u8bf7\u8f93\u5165\u5b89\u5168\u7801\uff01"),n.pinCode.join("").length<5&&(t.pinCode="\u5b89\u5168\u7801\u6ca1\u6709\u8f93\u5165\u5b8c\u6574\uff01"),Object.keys(t).length>0){var o=new Error;throw o.filed=t,r.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01"}),o}r.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u5b89\u5168\u7801\u4e3a\uff1a".concat(n.pinCode.join(""),"\uff01")})},fields:{pinCode:{initialValue:["","","","",""],children:n.default.createElement(r.PinCode,null)}}},(function(e){var t=e.fields,o=e.state,i=e.canSubmit;return console.log("state:",o.current.pinCode.join("")),n.default.createElement("div",null,n.default.createElement(r.Row,null,n.default.createElement(r.Col,{fixed:!0},t.pinCode)),n.default.createElement(r.Row,null,n.default.createElement(r.Col,{fixed:!0},n.default.createElement(r.Button,{size:"small",disabled:!i(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"),n.default.createElement("span",{style:{paddingLeft:16,color:"#a7a7a7",verticalAlign:"middle"}},o.current.pinCode.join("")))),n.default.createElement(r.Row,null,n.default.createElement(r.Col,null,n.default.createElement("pre",{style:{padding:10,marginTop:10}},JSON.stringify(o.current,null,2)))))})))}}(),110:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement("div",null,n.default.createElement(r.PinCode,{placeholder:"\u25a0",value:["8","7","3","",""],onChange:function(e){return console.log(e)}}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{placeholder:"\u2605",value:["6","","","",""],onChange:function(e){return console.log(e)}}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{placeholder:"\ud83e\udd23",value:["","","","",""],onChange:function(e){return console.log(e)}}))}}(),129:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement("div",null,n.default.createElement(r.PinCode,{disabled:!0,value:["1","9","8","7","0"]}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{disabled:!0,value:["","","","",""]}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{disabled:!0,placeholder:"\ud83e\udd23",value:["","","","",""]}))}}(),148:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement("div",null,n.default.createElement(r.PinCode,{size:"large",value:["1","9","8","7","0"]}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{value:["","","","",""]}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{size:"small",value:["","","","",""]}))}}()},data:{19:{name:19,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.PinCode, {\n    autoFocus: true,\n    value: [\'\', \'\', \'\', \'\', \'\'],\n    onChange: function onChange(val) {\n      return console.log(val);\n    }\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { PinCode } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <PinCode autoFocus value={['', '', '', '', '']} onChange={(val) => console.log(val)} />\n    </div>\n  );\n}"},36:{name:36,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n    resetOnSubmit: false,\n    onSubmitError: function onSubmitError(error) {\n      if (error.filed) {\n        return _objectSpread({}, error.filed);\n      }\n      return null;\n    },\n    onSubmit: function onSubmit(_ref) {\n      var initial = _ref.initial,\n        current = _ref.current;\n      var errorObj = {};\n      if (current.pinCode.join(\'\').length === 0) {\n        errorObj.pinCode = \'\u8bf7\u8f93\u5165\u5b89\u5168\u7801\uff01\';\n      }\n      if (current.pinCode.join(\'\').length < 5) {\n        errorObj.pinCode = \'\u5b89\u5168\u7801\u6ca1\u6709\u8f93\u5165\u5b8c\u6574\uff01\';\n      }\n      if (Object.keys(errorObj).length > 0) {\n        var err = new Error();\n        err.filed = errorObj;\n        _uiw.Notify.error({\n          title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n          description: \'\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01\'\n        });\n        throw err;\n      }\n      _uiw.Notify.success({\n        title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n        description: "\\u8868\\u5355\\u63D0\\u4EA4\\u6210\\u529F\\uFF0C\\u5B89\\u5168\\u7801\\u4E3A\\uFF1A".concat(current.pinCode.join(\'\'), "\\uFF01")\n      });\n    },\n    fields: {\n      pinCode: {\n        initialValue: [\'\', \'\', \'\', \'\', \'\'],\n        children: /*#__PURE__*/_react["default"].createElement(_uiw.PinCode, null)\n      }\n    }\n  }, function (_ref2) {\n    var fields = _ref2.fields,\n      state = _ref2.state,\n      canSubmit = _ref2.canSubmit;\n    console.log(\'state:\', state.current.pinCode.join(\'\'));\n    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n      fixed: true\n    }, fields.pinCode)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n      fixed: true\n    }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n      size: "small",\n      disabled: !canSubmit(),\n      type: "primary",\n      htmlType: "submit"\n    }, "\\u63D0\\u4EA4"), /*#__PURE__*/_react["default"].createElement("span", {\n      style: {\n        paddingLeft: 16,\n        color: \'#a7a7a7\',\n        verticalAlign: \'middle\'\n      }\n    }, state.current.pinCode.join(\'\')))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement("pre", {\n      style: {\n        padding: 10,\n        marginTop: 10\n      }\n    }, JSON.stringify(state.current, null, 2)))));\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { Form, Row, Col, Icon, PinCode, Button, Notify } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <Form\n        resetOnSubmit={false}\n        onSubmitError={(error) => {\n          if (error.filed) {\n            return { ...error.filed };\n          }\n          return null;\n        }}\n        onSubmit={({initial, current}) => {\n          const errorObj = {};\n          if (current.pinCode.join('').length === 0) {\n            errorObj.pinCode = '\u8bf7\u8f93\u5165\u5b89\u5168\u7801\uff01';\n          }\n          if (current.pinCode.join('').length < 5) {\n            errorObj.pinCode = '\u5b89\u5168\u7801\u6ca1\u6709\u8f93\u5165\u5b8c\u6574\uff01';\n          }\n          if(Object.keys(errorObj).length > 0) {\n            const err = new Error();\n            err.filed = errorObj;\n            Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n            throw err;\n          }\n          Notify.success({\n            title: '\u63d0\u4ea4\u6210\u529f\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u5b89\u5168\u7801\u4e3a\uff1a${current.pinCode.join('')}\uff01`,\n          });\n        }}\n        fields={{\n          pinCode: {\n            initialValue: ['', '', '', '', ''],\n            children: <PinCode />\n          },\n        }}\n      >\n        {({ fields, state, canSubmit }) => {\n          console.log('state:',state.current.pinCode.join(''))\n          return (\n            <div>\n              <Row>\n                <Col fixed>{fields.pinCode}</Col>\n              </Row>\n              <Row>\n                <Col fixed>\n                  <Button size=\"small\" disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                  <span style={{ paddingLeft: 16, color: '#a7a7a7', verticalAlign: 'middle' }}>\n                    {state.current.pinCode.join('')}\n                  </span>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <pre style={{ padding: 10, marginTop: 10 }}>\n                    {JSON.stringify(state.current, null, 2)}\n                  </pre>\n                </Col>\n              </Row>\n            </div>\n          )\n        }}\n      </Form>\n    </div>\n  )\n}"},110:{name:110,meta:{bg:"#fff"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    placeholder: \"\\u25A0\",\n    value: ['8', '7', '3', '', ''],\n    onChange: function onChange(val) {\n      return console.log(val);\n    }\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    placeholder: \"\\u2605\",\n    value: ['6', '', '', '', ''],\n    onChange: function onChange(val) {\n      return console.log(val);\n    }\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    placeholder: \"\\uD83E\\uDD23\",\n    value: ['', '', '', '', ''],\n    onChange: function onChange(val) {\n      return console.log(val);\n    }\n  }));\n};",language:"jsx",value:"import React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <PinCode placeholder=\"\u25a0\" value={['8', '7', '3', '', '']} onChange={(val) => console.log(val)} />\n      <Divider />\n      <PinCode placeholder=\"\u2605\" value={['6', '', '', '', '']} onChange={(val) => console.log(val)} />\n      <Divider />\n      <PinCode placeholder=\"\ud83e\udd23\" value={['', '', '', '', '']} onChange={(val) => console.log(val)} />\n    </div>\n  );\n}"},129:{name:129,meta:{bg:"#fff"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    disabled: true,\n    value: ['1', '9', '8', '7', '0']\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    disabled: true,\n    value: ['', '', '', '', '']\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    disabled: true,\n    placeholder: \"\\uD83E\\uDD23\",\n    value: ['', '', '', '', '']\n  }));\n};",language:"jsx",value:"import React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <PinCode disabled value={['1', '9', '8', '7', '0']} />\n      <Divider />\n      <PinCode disabled value={['', '', '', '', '']} />\n      <Divider />\n      <PinCode disabled placeholder=\"\ud83e\udd23\" value={['', '', '', '', '']} />\n    </div>\n  );\n}"},148:{name:148,meta:{bg:"#fff"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    size: \"large\",\n    value: ['1', '9', '8', '7', '0']\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    value: ['', '', '', '', '']\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    size: \"small\",\n    value: ['', '', '', '', '']\n  }));\n};",language:"jsx",value:"import React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <PinCode size=\"large\" value={['1', '9', '8', '7', '0']} />\n      <Divider />\n      <PinCode value={['', '', '', '', '']} />\n      <Divider />\n      <PinCode size=\"small\" value={['', '', '', '', '']} />\n    </div>\n  );\n}"}},source:"PinCode \u5b89\u5168\u7801\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-pin-code/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-pin-code.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-pin-code)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-pin-code.svg?label=@uiw/react-pin-code)](https://npmjs.com/@uiw/react-pin-code)\n\n\u9488\u5bf9\u8f93\u5165\u6570\u5b57\u5e8f\u5217\u8fdb\u884c\u4e86\u4f18\u5316\u3002\u6700\u5e38\u89c1\u7684\u5e94\u7528\u662f\u8f93\u5165\u4e00\u6b21\u6027\u5b89\u5168\u7801\u3002\u5b83\u7ecf\u8fc7\u4f18\u5316\uff0c\u53ef\u5feb\u901f\u8f93\u5165\u6570\u5b57\u3002\n\n```jsx\nimport { PinCode } from 'uiw';\n// or\nimport PinCode from '@uiw/react-pin-code';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { PinCode } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <PinCode autoFocus value={['', '', '', '', '']} onChange={(val) => console.log(val)} />\n    </div>\n  );\n}\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 [`<PinCode />`](#/components/pin-code) \u7ec4\u4ef6\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Form, Row, Col, Icon, PinCode, Button, Notify } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <Form\n        resetOnSubmit={false}\n        onSubmitError={(error) => {\n          if (error.filed) {\n            return { ...error.filed };\n          }\n          return null;\n        }}\n        onSubmit={({initial, current}) => {\n          const errorObj = {};\n          if (current.pinCode.join('').length === 0) {\n            errorObj.pinCode = '\u8bf7\u8f93\u5165\u5b89\u5168\u7801\uff01';\n          }\n          if (current.pinCode.join('').length < 5) {\n            errorObj.pinCode = '\u5b89\u5168\u7801\u6ca1\u6709\u8f93\u5165\u5b8c\u6574\uff01';\n          }\n          if(Object.keys(errorObj).length > 0) {\n            const err = new Error();\n            err.filed = errorObj;\n            Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n            throw err;\n          }\n          Notify.success({\n            title: '\u63d0\u4ea4\u6210\u529f\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u5b89\u5168\u7801\u4e3a\uff1a${current.pinCode.join('')}\uff01`,\n          });\n        }}\n        fields={{\n          pinCode: {\n            initialValue: ['', '', '', '', ''],\n            children: <PinCode />\n          },\n        }}\n      >\n        {({ fields, state, canSubmit }) => {\n          console.log('state:',state.current.pinCode.join(''))\n          return (\n            <div>\n              <Row>\n                <Col fixed>{fields.pinCode}</Col>\n              </Row>\n              <Row>\n                <Col fixed>\n                  <Button size=\"small\" disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                  <span style={{ paddingLeft: 16, color: '#a7a7a7', verticalAlign: 'middle' }}>\n                    {state.current.pinCode.join('')}\n                  </span>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <pre style={{ padding: 10, marginTop: 10 }}>\n                    {JSON.stringify(state.current, null, 2)}\n                  </pre>\n                </Col>\n              </Row>\n            </div>\n          )\n        }}\n      </Form>\n    </div>\n  )\n}\n```\n\n### \u66f4\u6539\u5360\u4f4d\u7b26\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <PinCode placeholder=\"\u25a0\" value={['8', '7', '3', '', '']} onChange={(val) => console.log(val)} />\n      <Divider />\n      <PinCode placeholder=\"\u2605\" value={['6', '', '', '', '']} onChange={(val) => console.log(val)} />\n      <Divider />\n      <PinCode placeholder=\"\ud83e\udd23\" value={['', '', '', '', '']} onChange={(val) => console.log(val)} />\n    </div>\n  );\n}\n```\n\n### \u8f93\u5165\u6846\u88ab\u7981\u7528\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <PinCode disabled value={['1', '9', '8', '7', '0']} />\n      <Divider />\n      <PinCode disabled value={['', '', '', '', '']} />\n      <Divider />\n      <PinCode disabled placeholder=\"\ud83e\udd23\" value={['', '', '', '', '']} />\n    </div>\n  );\n}\n```\n\n### \u5c3a\u5bf8\u5927\u5c0f\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <PinCode size=\"large\" value={['1', '9', '8', '7', '0']} />\n      <Divider />\n      <PinCode value={['', '', '', '', '']} />\n      <Divider />\n      <PinCode size=\"small\" value={['', '', '', '', '']} />\n    </div>\n  );\n}\n```\n\n## PinCode\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| value | \u7ed1\u5b9a\u503c\uff0c\u6839\u636e\u6570\u7ec4\u957f\u5ea6\uff0c\u5c55\u793a\u5b89\u5168\u7801\u7684\u957f\u5ea6 | string[] | - |\n| disabled | \u7981\u7528\u8f93\u5165\u6846 | Boolean | `false` |\n| autoFocus | \u81ea\u52a8\u83b7\u5f97\u7126\u70b9\u3002 | Boolean | - |\n| placeholder | \u5360\u4f4d\u7b26 | string | `\u25cb` |\n| size | \u6307\u5b9a\u8f93\u5165\u6846\u7684\u5c3a\u5bf8\uff0c\u9664\u4e86\u9ed8\u8ba4\u7684\u5927\u5c0f\u5916\uff0c\u8fd8\u63d0\u4f9b\u4e86 `large`\u3001`small` \u548c `default` \u4e09\u79cd\u5c3a\u5bf8\u3002 | String | - |\n| onChange | `value` \u53d8\u5316\u65f6\u56de\u8c03\u51fd\u6570 | Function(value: string[]) | - |\n| onBlur | \u5931\u53bb\u7126\u70b9\u65f6\u8fd0\u884c | Function(event: React.FocusEvent<HTMLInputElement\\>) | - |\n| onFocus | \u83b7\u5f97\u7126\u70b9\u65f6\u8fd0\u884c | Function(event: React.FocusEvent<HTMLInputElement\\>) | - |",headings:[],headingsList:[]};var o=t(5301),i=t(4760);function l(){return(0,i.jsx)(o.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-pin-code/README.md"})}}}]);
//# sourceMappingURL=3451.cdb7ba80.chunk.js.map