UNPKG

@uiw/doc

Version:

UIW documentation website.

2 lines 41.8 kB
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[295],{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,l)=>{"use strict";l.d(n,{Z:()=>p});var t=l(8573),r=l(6320),a=l(8563),o=l(7622),u=l(7937);const i={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var c=l(4760);function s(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:n}=e,l=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,c.jsxs)("div",{className:i.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",l&&(0,c.jsx)("a",{href:l,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,c.jsx)("br",{}),(0,c.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const d=r.ZP.Preview,b=r.ZP.Code,v=r.ZP.Toolbar,f=e=>{var n,l;let{node:o,components:u,data:i,...s}=e;const f=(0,t.useRef)(null),{headings:p,headingsList:m,...h}=s;(0,t.useEffect)((()=>{if(f.current){const e=f.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(f.current,e)}}),[f]);const w=null===o||void 0===o||null===(n=o.position)||void 0===n?void 0:n.start.line,_=null===o||void 0===o||null===(l=o.data)||void 0===l?void 0:l.meta,g=(0,a.Mx)(_)||String(w),y=u["".concat(g)];if(g&&"function"===typeof y){const e=i[g].value||"",n=(0,a.aE)(_||"");return(0,c.jsxs)(r.ZP,{ref:f,children:[(0,c.jsx)(d,{style:{background:n.bg||"transparent"},children:(0,c.jsx)(y,{})}),(0,c.jsx)(v,{text:e,children:n.title||"Example"}),(0,c.jsx)(b,{children:(0,c.jsx)("pre",{...h})})]})}return(0,c.jsx)("code",{...h})};function p(e){return(0,c.jsxs)(t.Fragment,{children:[(0,c.jsx)(o.Z,{className:i.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:n=>(0,c.jsx)(f,{...e,...n})}}),(0,c.jsx)(s,{path:e.path})]})}},4454:(e,n,l)=>{"use strict";l.r(n),l.d(n,{default:()=>o});const t={components:{19:function(){var e,n=(e=l(8573))&&e.__esModule?e:{default:e},t=l(7937);return function(){var e=[{label:"\u4e0a\u6d77\u5e02",value:1,children:[{label:"\u5f90\u6c47\u533a",value:4,children:[{label:"\u534a\u6dde\u56ed\u8def\u8857\u9053",value:6},{label:"\u5357\u4eac\u4e1c\u8def\u8857\u9053",value:7},{label:"\u5916\u6ee9\u8857\u9053",value:8}]}]},{label:"\u5317\u4eac\u5e02",value:9,children:[{label:"\u5d07\u6587\u533a",value:12,children:[{label:"\u4e1c\u82b1\u5e02\u8857\u9053",value:13},{label:"\u4f53\u80b2\u9986\u8def\u8857\u9053",value:14},{label:"\u524d\u95e8\u8857\u9053",value:15}]}]}];return n.default.createElement(t.Row,null,n.default.createElement(t.Row,null,n.default.createElement(t.Cascader,{style:{width:200},allowClear:!0,placeholder:"\u8bf7\u9009\u62e9",value:[1,4,7],option:e,onChange:function(e,n){return console.log(e,n)}})),n.default.createElement(t.Row,{style:{marginLeft:20}},n.default.createElement(t.Cascader,{style:{width:200},allowClear:!0,placeholder:"\u8bf7\u9009\u62e9",value:[1,4,7],disabled:!0,option:e,onChange:function(e,n){return console.log(e,n)}})))}}(),88:function(){var e,n=(e=l(8573))&&e.__esModule?e:{default:e},t=l(7937);return function(){var e=[{label:"\u5c3a\u5bf8",value:1,children:[{label:"size",value:2,children:[{label:"\u5c0f\u5c3a\u5bf8",value:3},{label:"\u9ed8\u8ba4\u5c3a\u5bf8",value:4},{label:"\u5927\u5c3a\u5bf8",value:5}]}]}];return n.default.createElement(t.Row,{style:{flexDirection:"column"}},n.default.createElement(t.Cascader,{style:{width:150},value:[1,2,3],option:e,size:"small"}),n.default.createElement(t.Cascader,{style:{width:175,marginTop:10},value:[1,2,4],option:e}),n.default.createElement(t.Cascader,{style:{width:200,marginTop:10},value:[1,2,5],option:e,size:"large"}))}}(),137:function(){var e,n=(e=l(8573))&&e.__esModule?e:{default:e},t=l(7937);return function(){return n.default.createElement(t.Cascader,{style:{width:200},allowClear:!0,placeholder:"\u8bf7\u9009\u62e9",value:[1,4,7],option:[{label:"\u4e0a\u6d77\u5e02",value:1,children:[{label:"\u5f90\u6c47\u533a",value:4,children:[{label:"\u534a\u6dde\u56ed\u8def\u8857\u9053",value:6},{label:"\u5357\u4eac\u4e1c\u8def\u8857\u9053",value:7},{label:"\u5916\u6ee9\u8857\u9053",value:8}]}]},{label:"\u5317\u4eac\u5e02",value:9,children:[{label:"\u5d07\u6587\u533a",value:12,children:[{label:"\u4e1c\u82b1\u5e02\u8857\u9053",value:13},{label:"\u4f53\u80b2\u9986\u8def\u8857\u9053",value:14},{label:"\u524d\u95e8\u8857\u9053",value:15}]}]}],onChange:function(e,n){return console.log(e,n)},onSearch:function(e){return console.log("text",e)}})}}(),193:function(){var e,n=(e=l(8573))&&e.__esModule?e:{default:e},t=l(7937);return function(){return n.default.createElement(t.Row,{style:{flexDirection:"column"}},n.default.createElement(t.Cascader,{style:{width:200},expandTrigger:"hover",allowClear:!0,placeholder:"\u8bf7\u9009\u62e9",value:[1,4,7],option:[{label:"\u4e0a\u6d77\u5e02",value:1,children:[{label:"\u5f90\u6c47\u533a",value:4,children:[{label:"\u534a\u6dde\u56ed\u8def\u8857\u9053",value:6},{label:"\u5357\u4eac\u4e1c\u8def\u8857\u9053",value:7},{label:"\u5916\u6ee9\u8857\u9053",value:8}]}]},{label:"\u5317\u4eac\u5e02",value:9,children:[{label:"\u5d07\u6587\u533a",value:12,children:[{label:"\u4e1c\u82b1\u5e02\u8857\u9053",value:13},{label:"\u4f53\u80b2\u9986\u8def\u8857\u9053",value:14},{label:"\u524d\u95e8\u8857\u9053",value:15}]}]}],onChange:function(e,n){return console.log(e,n)},onSearch:!0}))}}(),254:function(){var e,n=(e=l(8573))&&e.__esModule?e:{default:e},t=l(7937);function r(e){return r="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},r(e)}function a(e,n){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),l.push.apply(l,t)}return l}function o(e,n,l){return(n=function(e){var n=function(e,n){if("object"!==r(e)||null===e)return e;var l=e[Symbol.toPrimitive];if(void 0!==l){var t=l.call(e,n||"default");if("object"!==r(t))return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===r(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[n]=l,e}return function(){return n.default.createElement("div",null,n.default.createElement(t.Form,{onSubmitError:function(e){return e.filed?function(e){for(var n=1;n<arguments.length;n++){var l=null!=arguments[n]?arguments[n]:{};n%2?a(Object(l),!0).forEach((function(n){o(e,n,l[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):a(Object(l)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(l,n))}))}return e}({},e.filed):null},onSubmit:function(e){e.initial;var n=e.current,l={};if(n.selectField||(l.selectField="\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9"),Object.keys(l).length>0){var t=new Error;throw t.filed=l,Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01"}),t}Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a".concat(n.selectField,"\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01")})},fields:{cascader:{initialValue:[1,4,7],children:n.default.createElement(t.Cascader,{allowClear:!0,onSearch:!0,placeholder:"\u8bf7\u9009\u62e9",option:[{label:"\u4e0a\u6d77\u5e02",value:1,children:[{label:"\u5f90\u6c47\u533a",value:4,children:[{label:"\u534a\u6dde\u56ed\u8def\u8857\u9053",value:6},{label:"\u5357\u4eac\u4e1c\u8def\u8857\u9053",value:7},{label:"\u5916\u6ee9\u8857\u9053",value:8}]}]},{label:"\u5317\u4eac\u5e02",value:9,children:[{label:"\u5d07\u6587\u533a",value:12,children:[{label:"\u4e1c\u82b1\u5e02\u8857\u9053",value:13},{label:"\u4f53\u80b2\u9986\u8def\u8857\u9053",value:14},{label:"\u524d\u95e8\u8857\u9053",value:15}]}]}],onChange:function(e,n){return console.log(e,n)}})}}},(function(e){var l=e.fields,r=e.state,a=e.canSubmit;return n.default.createElement("div",null,n.default.createElement(t.Row,null,n.default.createElement(t.Col,{fixed:!0,style:{width:200}},l.cascader)),n.default.createElement(t.Row,null,n.default.createElement(t.Col,{fixed:!0},n.default.createElement(t.Button,{disabled:!a(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"))),n.default.createElement(t.Row,null,n.default.createElement(t.Col,null,n.default.createElement("pre",{style:{padding:10,marginTop:10}},JSON.stringify(r.current,null,2)))))})))}}()},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 }; }\nvar Demo = function Demo() {\n var options = [{\n label: \'\u4e0a\u6d77\u5e02\',\n value: 1,\n children: [{\n label: \'\u5f90\u6c47\u533a\',\n value: 4,\n children: [{\n label: \'\u534a\u6dde\u56ed\u8def\u8857\u9053\',\n value: 6\n }, {\n label: \'\u5357\u4eac\u4e1c\u8def\u8857\u9053\',\n value: 7\n }, {\n label: \'\u5916\u6ee9\u8857\u9053\',\n value: 8\n }]\n }]\n }, {\n label: \'\u5317\u4eac\u5e02\',\n value: 9,\n children: [{\n label: \'\u5d07\u6587\u533a\',\n value: 12,\n children: [{\n label: \'\u4e1c\u82b1\u5e02\u8857\u9053\',\n value: 13\n }, {\n label: \'\u4f53\u80b2\u9986\u8def\u8857\u9053\',\n value: 14\n }, {\n label: \'\u524d\u95e8\u8857\u9053\',\n value: 15\n }]\n }]\n }];\n return /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Cascader, {\n style: {\n width: 200\n },\n allowClear: true,\n placeholder: "\\u8BF7\\u9009\\u62E9",\n value: [1, 4, 7],\n option: options,\n onChange: function onChange(value, seleteds) {\n return console.log(value, seleteds);\n }\n })), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n style: {\n marginLeft: 20\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Cascader, {\n style: {\n width: 200\n },\n allowClear: true,\n placeholder: "\\u8BF7\\u9009\\u62E9",\n value: [1, 4, 7],\n disabled: true,\n option: options,\n onChange: function onChange(value, seleteds) {\n return console.log(value, seleteds);\n }\n })));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Cascader, Row } from 'uiw';\n\nconst Demo = () => {\n const options = [\n {\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [\n {\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [\n {\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n ]\n },\n ]\n },\n ];\n\n return (\n <Row>\n <Row>\n <Cascader\n style={{ width:200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n value={[1, 4, 7]}\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n />\n </Row>\n <Row style={{ marginLeft: 20 }}>\n <Cascader\n style={{ width:200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n value={[1, 4, 7]}\n disabled={true}\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n />\n </Row>\n </Row>\n )\n};\nexport default Demo"},88:{name:88,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n var options = [{\n label: \'\u5c3a\u5bf8\',\n value: 1,\n children: [{\n label: \'size\',\n value: 2,\n children: [{\n label: \'\u5c0f\u5c3a\u5bf8\',\n value: 3\n }, {\n label: \'\u9ed8\u8ba4\u5c3a\u5bf8\',\n value: 4\n }, {\n label: \'\u5927\u5c3a\u5bf8\',\n value: 5\n }]\n }]\n }];\n return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n style: {\n flexDirection: \'column\'\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Cascader, {\n style: {\n width: 150\n },\n value: [1, 2, 3],\n option: options,\n size: "small"\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Cascader, {\n style: {\n width: 175,\n marginTop: 10\n },\n value: [1, 2, 4],\n option: options\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Cascader, {\n style: {\n width: 200,\n marginTop: 10\n },\n value: [1, 2, 5],\n option: options,\n size: "large"\n }));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Cascader, Row } from 'uiw';\n\nconst Demo = () => {\n const options = [\n {\n label: '\u5c3a\u5bf8', value: 1,\n children: [\n {\n label: 'size',\n value: 2,\n children: [\n { label: '\u5c0f\u5c3a\u5bf8', value: 3 },\n { label: '\u9ed8\u8ba4\u5c3a\u5bf8', value: 4 },\n { label: '\u5927\u5c3a\u5bf8', value: 5 },\n ]\n },\n ]\n }\n ];\n\n return (\n <Row style={{ flexDirection: 'column' }}>\n <Cascader\n style={{ width: 150 }}\n value={[1, 2, 3]}\n option={options}\n size=\"small\"\n />\n <Cascader\n style={{ width: 175, marginTop: 10 }}\n value={[1, 2, 4]}\n option={options}\n />\n <Cascader\n style={{ width: 200, marginTop: 10 }}\n value={[1, 2, 5]}\n option={options}\n size=\"large\"\n />\n </Row>\n )\n};\nexport default Demo"},137:{name:137,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 }; }\nvar Demo = function Demo() {\n var options = [{\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [{\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [{\n label: '\u534a\u6dde\u56ed\u8def\u8857\u9053',\n value: 6\n }, {\n label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053',\n value: 7\n }, {\n label: '\u5916\u6ee9\u8857\u9053',\n value: 8\n }]\n }]\n }, {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [{\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [{\n label: '\u4e1c\u82b1\u5e02\u8857\u9053',\n value: 13\n }, {\n label: '\u4f53\u80b2\u9986\u8def\u8857\u9053',\n value: 14\n }, {\n label: '\u524d\u95e8\u8857\u9053',\n value: 15\n }]\n }]\n }];\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.Cascader, {\n style: {\n width: 200\n },\n allowClear: true,\n placeholder: \"\\u8BF7\\u9009\\u62E9\",\n value: [1, 4, 7],\n option: options,\n onChange: function onChange(value, seleteds) {\n return console.log(value, seleteds);\n },\n onSearch: function onSearch(text) {\n return console.log('text', text);\n }\n });\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Cascader } from 'uiw';\n\nconst Demo = () => {\n const options = [\n {\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [\n {\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [\n {\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n ]\n },\n ]\n },\n ];\n\n return (\n <Cascader\n style={{ width: 200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n value={[1, 4, 7]}\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n onSearch={(text)=> console.log('text', text)}\n />\n )\n};\n\nexport default Demo"},193:{name:193,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 }; }\nvar Demo = function Demo() {\n var options = [{\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [{\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [{\n label: '\u534a\u6dde\u56ed\u8def\u8857\u9053',\n value: 6\n }, {\n label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053',\n value: 7\n }, {\n label: '\u5916\u6ee9\u8857\u9053',\n value: 8\n }]\n }]\n }, {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [{\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [{\n label: '\u4e1c\u82b1\u5e02\u8857\u9053',\n value: 13\n }, {\n label: '\u4f53\u80b2\u9986\u8def\u8857\u9053',\n value: 14\n }, {\n label: '\u524d\u95e8\u8857\u9053',\n value: 15\n }]\n }]\n }];\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.Row, {\n style: {\n flexDirection: 'column'\n }\n }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Cascader, {\n style: {\n width: 200\n },\n expandTrigger: \"hover\",\n allowClear: true,\n placeholder: \"\\u8BF7\\u9009\\u62E9\",\n value: [1, 4, 7],\n option: options,\n onChange: function onChange(value, seleteds) {\n return console.log(value, seleteds);\n },\n onSearch: true\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Cascader, Row } from 'uiw';\n\nconst Demo = () => {\n\n const options = [\n {\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [\n {\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [\n {\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n ]\n },\n ]\n },\n ];\n\n return (\n <Row style={{ flexDirection: 'column' }}>\n <Cascader\n style={{ width:200 }}\n expandTrigger=\"hover\"\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n value={[1, 4, 7]}\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n onSearch={true}\n />\n </Row>\n )\n};\nexport default Demo"},254:{name:254,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); }\nvar Demo = function Demo() {\n var options = [{\n label: \'\u4e0a\u6d77\u5e02\',\n value: 1,\n children: [{\n label: \'\u5f90\u6c47\u533a\',\n value: 4,\n children: [{\n label: \'\u534a\u6dde\u56ed\u8def\u8857\u9053\',\n value: 6\n }, {\n label: \'\u5357\u4eac\u4e1c\u8def\u8857\u9053\',\n value: 7\n }, {\n label: \'\u5916\u6ee9\u8857\u9053\',\n value: 8\n }]\n }]\n }, {\n label: \'\u5317\u4eac\u5e02\',\n value: 9,\n children: [{\n label: \'\u5d07\u6587\u533a\',\n value: 12,\n children: [{\n label: \'\u4e1c\u82b1\u5e02\u8857\u9053\',\n value: 13\n }, {\n label: \'\u4f53\u80b2\u9986\u8def\u8857\u9053\',\n value: 14\n }, {\n label: \'\u524d\u95e8\u8857\u9053\',\n value: 15\n }]\n }]\n }];\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\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.selectField) {\n errorObj.selectField = \'\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9\';\n }\n if (Object.keys(errorObj).length > 0) {\n var err = new Error();\n err.filed = errorObj;\n 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 Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: "\\u8868\\u5355\\u63D0\\u4EA4\\u6210\\u529F\\uFF0C\\u9009\\u62E9\\u503C\\u4E3A\\uFF1A".concat(current.selectField, "\\uFF0C\\u5C06\\u81EA\\u52A8\\u586B\\u5145\\u521D\\u59CB\\u5316\\u503C\\uFF01")\n });\n },\n fields: {\n cascader: {\n initialValue: [1, 4, 7],\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Cascader, {\n allowClear: true,\n onSearch: true,\n placeholder: "\\u8BF7\\u9009\\u62E9",\n option: options,\n onChange: function onChange(value, seleteds) {\n return console.log(value, seleteds);\n }\n })\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields,\n state = _ref2.state,\n canSubmit = _ref2.canSubmit;\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 style: {\n width: 200\n }\n }, fields.cascader)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"))), /*#__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};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Form, Row, Col, Cascader, Button } from 'uiw';\n\nconst Demo = () => {\nconst options = [\n {\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [\n {\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [\n {\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n ]\n },\n ]\n },\n ];\n\n return (\n <div>\n <Form\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.selectField) {\n errorObj.selectField = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\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\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n cascader: {\n initialValue:[1, 4, 7],\n children: (\n <Cascader\n allowClear={true}\n onSearch={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row >\n <Col fixed style={{width:200}}>{fields.cascader}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\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}\nexport default Demo"}},source:"Cascader \u7ea7\u8054\u9009\u62e9\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-cascader/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-cascader.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-cascader)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-cascader.svg?label=@uiw/react-cascader)](https://npmjs.com/@uiw/react-cascader)\n\n\u7ea7\u8054\u9009\u62e9\u6846\u3002v4.16.0\u4e2d\u6dfb\u52a0\n\n```jsx\nimport { Cascader, Row, Col } from 'uiw';\n// or\nimport Cascader from '@uiw/react-cascader';\n```\n\n## \u57fa\u7840\u793a\u4f8b\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Cascader, Row } from 'uiw';\n\nconst Demo = () => {\n const options = [\n {\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [\n {\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [\n {\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n ]\n },\n ]\n },\n ];\n\n return (\n <Row>\n <Row>\n <Cascader\n style={{ width:200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n value={[1, 4, 7]}\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n />\n </Row>\n <Row style={{ marginLeft: 20 }}>\n <Cascader\n style={{ width:200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n value={[1, 4, 7]}\n disabled={true}\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n />\n </Row>\n </Row>\n )\n};\nexport default Demo\n```\n\n## \u5c3a\u5bf8\n\n```jsx mdx:preview\nimport React from 'react';\nimport { Cascader, Row } from 'uiw';\n\nconst Demo = () => {\n const options = [\n {\n label: '\u5c3a\u5bf8', value: 1,\n children: [\n {\n label: 'size',\n value: 2,\n children: [\n { label: '\u5c0f\u5c3a\u5bf8', value: 3 },\n { label: '\u9ed8\u8ba4\u5c3a\u5bf8', value: 4 },\n { label: '\u5927\u5c3a\u5bf8', value: 5 },\n ]\n },\n ]\n }\n ];\n\n return (\n <Row style={{ flexDirection: 'column' }}>\n <Cascader\n style={{ width: 150 }}\n value={[1, 2, 3]}\n option={options}\n size=\"small\"\n />\n <Cascader\n style={{ width: 175, marginTop: 10 }}\n value={[1, 2, 4]}\n option={options}\n />\n <Cascader\n style={{ width: 200, marginTop: 10 }}\n value={[1, 2, 5]}\n option={options}\n size=\"large\"\n />\n </Row>\n )\n};\nexport default Demo\n```\n\n## \u641c\u7d22\u9009\u9879\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Cascader } from 'uiw';\n\nconst Demo = () => {\n const options = [\n {\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [\n {\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [\n {\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n ]\n },\n ]\n },\n ];\n\n return (\n <Cascader\n style={{ width: 200 }}\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n value={[1, 4, 7]}\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n onSearch={(text)=> console.log('text', text)}\n />\n )\n};\n\nexport default Demo\n```\n\n## \u79fb\u5165\u5c55\u5f00\u83dc\u5355\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Cascader, Row } from 'uiw';\n\nconst Demo = () => {\n\n const options = [\n {\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [\n {\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [\n {\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n ]\n },\n ]\n },\n ];\n\n return (\n <Row style={{ flexDirection: 'column' }}>\n <Cascader\n style={{ width:200 }}\n expandTrigger=\"hover\"\n allowClear={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n value={[1, 4, 7]}\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n onSearch={true}\n />\n </Row>\n )\n};\nexport default Demo\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 `<Cascader />` \u7ec4\u4ef6\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Form, Row, Col, Cascader, Button } from 'uiw';\n\nconst Demo = () => {\nconst options = [\n {\n label: '\u4e0a\u6d77\u5e02',\n value: 1,\n children: [\n {\n label: '\u5f90\u6c47\u533a',\n value: 4,\n children: [\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', value: 6 },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', value: 7 },\n { label: '\u5916\u6ee9\u8857\u9053', value: 8 },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n value: 9,\n children: [\n {\n label: '\u5d07\u6587\u533a',\n value: 12,\n children: [\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', value: 13 },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', value: 14 },\n { label: '\u524d\u95e8\u8857\u9053', value: 15 },\n ]\n },\n ]\n },\n ];\n\n return (\n <div>\n <Form\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.selectField) {\n errorObj.selectField = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\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\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n cascader: {\n initialValue:[1, 4, 7],\n children: (\n <Cascader\n allowClear={true}\n onSearch={true}\n placeholder=\"\u8bf7\u9009\u62e9\"\n option={options}\n onChange={(value, seleteds) => console.log(value, seleteds)}\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row >\n <Col fixed style={{width:200}}>{fields.cascader}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\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}\nexport default Demo\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c | \u7248\u672c |\n| ---- | ---- | ---- | ---- | ---- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` | - |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - | - |\n| option | \u9009\u9879\u83dc\u5355 | { value: String \\| Number, label: React.ReactNode, children: Array<String \\| Number>} | - | - |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee\uff0c\u591a\u9009\u65f6\u4e3a\u4e00\u4e2a\u6570\u7ec4 | String[] \\| Number[] | - | - |\n| onChange | \u9009\u4e2d\u9009\u9879\u8c03\u7528\u6b64\u51fd\u6570 | function( isSeleted, value, selectedOptions) | - | - |\n| onSearch | \u5f00\u542f\u641c\u7d22\u9009\u9879 | functionon(searchText) \\| Boolean | - | v4.16.1 |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` | v17.0.1 |\n| inputProps | \u4f20\u7ed9[Input](http://localhost:3000/#/components/input)\u7ec4\u4ef6\u7684\u53c2\u6570 | Object | - | v17.0.1 |\n| expandTrigger |\t\u5b50\u96c6\u83dc\u5355\u7684\u5c55\u5f00\u65b9\u5f0f\uff0c'click' \u548c 'hover' |\tString | `click` | v4.18.2 |\n",headings:[],headingsList:[]};var r=l(5301),a=l(4760);function o(){return(0,a.jsx)(r.Z,{...t,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-cascader/README.md"})}}}]); //# sourceMappingURL=295.0e900915.chunk.js.map