组件演示

[{"title":"基本","id":"components-cascade-select-demo-basic","tags":[],"filepath":"site/components/cascade-select/demo/basic.md","directory":"components/cascade-select/demo","filename":"basic","meta":{"title":"基本","description":"\n<p>最简单的用法。</p>\n","order":"0","filepath":"site/components/cascade-select/demo/basic.md","filename":"basic","directory":"components/cascade-select/demo","id":"components-cascade-select-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发'\n }]\n }]\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街'\n }]\n }]\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路'\n }]\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路'\n }]\n }]\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }]\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'demo-wrap' },\n React.createElement(_uxcore.CascadeSelect, {\n defaultValue: ['alibaba', 'platform', 'fe'],\n options: options,\n onChange: function onChange(value, selected) {\n return console.log(value, selected);\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-select-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { CascadeSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> options = [{\n value: <span class=\"hljs-string\">'alibaba'</span>,\n label: <span class=\"hljs-string\">'阿里巴巴'</span>,\n children: [{\n value: <span class=\"hljs-string\">'platform'</span>,\n label: <span class=\"hljs-string\">'企业智能事业部'</span>,\n children: [{\n value: <span class=\"hljs-string\">'fe'</span>,\n label: <span class=\"hljs-string\">'前端开发'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'beijing'</span>,\n label: <span class=\"hljs-string\">'日本'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xicheng'</span>,\n label: <span class=\"hljs-string\">'西城'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonggc'</span>,\n label: <span class=\"hljs-string\">'中观村大街'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'tianjin'</span>,\n label: <span class=\"hljs-string\">'天津'</span>,\n children: [{\n value: <span class=\"hljs-string\">'heping'</span>,\n label: <span class=\"hljs-string\">'和平区'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjinglu'</span>,\n label: <span class=\"hljs-string\">'南京路'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'hexi'</span>,\n label: <span class=\"hljs-string\">'河西区'</span>,\n children: [{\n value: <span class=\"hljs-string\">'dagu'</span>,\n label: <span class=\"hljs-string\">'大沽路'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'zhejiang'</span>,\n label: <span class=\"hljs-string\">'浙江'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hangzhou'</span>,\n label: <span class=\"hljs-string\">'杭州'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xihu'</span>,\n label: <span class=\"hljs-string\">'西湖'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'jiangsu'</span>,\n label: <span class=\"hljs-string\">'江苏'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjing'</span>,\n label: <span class=\"hljs-string\">'南京'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonghuamen'</span>,\n label: <span class=\"hljs-string\">'中华门'</span>,\n }],\n }],\n}];\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n xValue: [<span class=\"hljs-string\">'jiangsu'</span>, <span class=\"hljs-string\">'nanjing'</span>, <span class=\"hljs-string\">'zhonghuamen'</span>],\n testValue: <span class=\"hljs-number\">1</span>,\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-wrap\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeSelect</span>\n <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">{['alibaba',</span> '<span class=\"hljs-attribute\">platform</span>', '<span class=\"hljs-attribute\">fe</span>']}\n <span class=\"hljs-attribute\">options</span>=<span class=\"hljs-value\">{options}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{(value,</span> <span class=\"hljs-attribute\">selected</span>) =&gt;</span> console.log(value, selected)}\n /&gt;\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-cascade-select-demo-basic'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"允许清空","id":"components-cascade-select-demo-clear","tags":[],"filepath":"site/components/cascade-select/demo/clear.md","directory":"components/cascade-select/demo","filename":"clear","meta":{"title":"允许清空","description":"\n<p>最简单的用法。</p>\n","order":"1","filepath":"site/components/cascade-select/demo/clear.md","filename":"clear","directory":"components/cascade-select/demo","id":"components-cascade-select-demo-clear","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发'\n }]\n }]\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街'\n }]\n }]\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路'\n }]\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路'\n }]\n }]\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }]\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'demo-wrap' },\n React.createElement(_uxcore.CascadeSelect, {\n defaultValue: ['alibaba', 'platform', 'fe'],\n options: options,\n clearable: true,\n onChange: function onChange(value, selected) {\n return console.log(value, selected);\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-select-demo-clear'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { CascadeSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> options = [{\n value: <span class=\"hljs-string\">'alibaba'</span>,\n label: <span class=\"hljs-string\">'阿里巴巴'</span>,\n children: [{\n value: <span class=\"hljs-string\">'platform'</span>,\n label: <span class=\"hljs-string\">'企业智能事业部'</span>,\n children: [{\n value: <span class=\"hljs-string\">'fe'</span>,\n label: <span class=\"hljs-string\">'前端开发'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'beijing'</span>,\n label: <span class=\"hljs-string\">'日本'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xicheng'</span>,\n label: <span class=\"hljs-string\">'西城'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonggc'</span>,\n label: <span class=\"hljs-string\">'中观村大街'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'tianjin'</span>,\n label: <span class=\"hljs-string\">'天津'</span>,\n children: [{\n value: <span class=\"hljs-string\">'heping'</span>,\n label: <span class=\"hljs-string\">'和平区'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjinglu'</span>,\n label: <span class=\"hljs-string\">'南京路'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'hexi'</span>,\n label: <span class=\"hljs-string\">'河西区'</span>,\n children: [{\n value: <span class=\"hljs-string\">'dagu'</span>,\n label: <span class=\"hljs-string\">'大沽路'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'zhejiang'</span>,\n label: <span class=\"hljs-string\">'浙江'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hangzhou'</span>,\n label: <span class=\"hljs-string\">'杭州'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xihu'</span>,\n label: <span class=\"hljs-string\">'西湖'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'jiangsu'</span>,\n label: <span class=\"hljs-string\">'江苏'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjing'</span>,\n label: <span class=\"hljs-string\">'南京'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonghuamen'</span>,\n label: <span class=\"hljs-string\">'中华门'</span>,\n }],\n }],\n}];\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n xValue: [<span class=\"hljs-string\">'jiangsu'</span>, <span class=\"hljs-string\">'nanjing'</span>, <span class=\"hljs-string\">'zhonghuamen'</span>],\n testValue: <span class=\"hljs-number\">1</span>,\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-wrap\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeSelect</span>\n <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">{['alibaba',</span> '<span class=\"hljs-attribute\">platform</span>', '<span class=\"hljs-attribute\">fe</span>']}\n <span class=\"hljs-attribute\">options</span>=<span class=\"hljs-value\">{options}</span>\n <span class=\"hljs-attribute\">clearable</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{(value,</span> <span class=\"hljs-attribute\">selected</span>) =&gt;</span> console.log(value, selected)}\n /&gt;\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-cascade-select-demo-clear'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"尺寸","id":"components-cascade-select-demo-size","tags":[],"filepath":"site/components/cascade-select/demo/size.md","directory":"components/cascade-select/demo","filename":"size","meta":{"title":"尺寸","description":"\n<p>提供 large、middle、small 三种尺寸</p>\n","order":"1","filepath":"site/components/cascade-select/demo/size.md","filename":"size","directory":"components/cascade-select/demo","id":"components-cascade-select-demo-size","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发'\n }]\n }]\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街'\n }]\n }]\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路'\n }]\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路'\n }]\n }]\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }]\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var cascader = React.createElement(_uxcore.CascadeSelect, {\n defaultValue: ['alibaba', 'platform', 'fe'],\n options: options,\n clearable: true,\n onChange: function onChange(value, selected) {\n return console.log(value, selected);\n }\n });\n return React.createElement(\n 'div',\n { className: 'demo-wrap' },\n ['large', 'middle', 'small'].map(function (size) {\n return React.createElement(\n 'div',\n { style: { marginBottom: '4px' } },\n React.cloneElement(cascader, { size: size })\n );\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-select-demo-size'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeSelect } from 'uxcore';\nconst options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发',\n }],\n }],\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街',\n }],\n }],\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路',\n }],\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路',\n }],\n }],\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }],\n }],\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n}];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1,\n };\n }\n\n render() {\n const cascader = (\n &lt;CascadeSelect\n defaultValue={['alibaba', 'platform', 'fe']}\n options={options}\n clearable\n onChange={(value, selected) =&gt; console.log(value, selected)}\n /&gt;\n );\n return (\n &lt;div className=\"demo-wrap\"&gt;\n {['large', 'middle', 'small'].map(size =&gt; (\n &lt;div style={{ marginBottom: '4px' }}&gt;{React.cloneElement(cascader, { size })}&lt;/div&gt;\n ))}\n &lt;/div&gt;\n );\n }\n}\n\nReactDOM.render(\n &lt;Demo /&gt;\n, document.getElementById('components-cascade-select-demo-size'));</code></pre></div>"},"status":"public","toc":""},{"title":"禁用","id":"components-cascade-select-demo-disable","tags":[],"filepath":"site/components/cascade-select/demo/disable.md","directory":"components/cascade-select/demo","filename":"disable","meta":{"title":"禁用","description":"\n<p>最简单的用法。</p>\n","order":"2","filepath":"site/components/cascade-select/demo/disable.md","filename":"disable","directory":"components/cascade-select/demo","id":"components-cascade-select-demo-disable","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发'\n }]\n }]\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街'\n }]\n }]\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路'\n }]\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路'\n }]\n }]\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }]\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'demo-wrap' },\n React.createElement(_uxcore.CascadeSelect, {\n defaultValue: ['alibaba', 'platform', 'fe'],\n options: options,\n clearable: true,\n disabled: true,\n onChange: function onChange(value, selected) {\n return console.log(value, selected);\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-select-demo-disable'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { CascadeSelect } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> options = [{\n value: <span class=\"hljs-string\">'alibaba'</span>,\n label: <span class=\"hljs-string\">'阿里巴巴'</span>,\n children: [{\n value: <span class=\"hljs-string\">'platform'</span>,\n label: <span class=\"hljs-string\">'企业智能事业部'</span>,\n children: [{\n value: <span class=\"hljs-string\">'fe'</span>,\n label: <span class=\"hljs-string\">'前端开发'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'beijing'</span>,\n label: <span class=\"hljs-string\">'日本'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xicheng'</span>,\n label: <span class=\"hljs-string\">'西城'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonggc'</span>,\n label: <span class=\"hljs-string\">'中观村大街'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'tianjin'</span>,\n label: <span class=\"hljs-string\">'天津'</span>,\n children: [{\n value: <span class=\"hljs-string\">'heping'</span>,\n label: <span class=\"hljs-string\">'和平区'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjinglu'</span>,\n label: <span class=\"hljs-string\">'南京路'</span>,\n }],\n }, {\n value: <span class=\"hljs-string\">'hexi'</span>,\n label: <span class=\"hljs-string\">'河西区'</span>,\n children: [{\n value: <span class=\"hljs-string\">'dagu'</span>,\n label: <span class=\"hljs-string\">'大沽路'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'zhejiang'</span>,\n label: <span class=\"hljs-string\">'浙江'</span>,\n children: [{\n value: <span class=\"hljs-string\">'hangzhou'</span>,\n label: <span class=\"hljs-string\">'杭州'</span>,\n children: [{\n value: <span class=\"hljs-string\">'xihu'</span>,\n label: <span class=\"hljs-string\">'西湖'</span>,\n }],\n }],\n}, {\n value: <span class=\"hljs-string\">'jiangsu'</span>,\n label: <span class=\"hljs-string\">'江苏'</span>,\n children: [{\n value: <span class=\"hljs-string\">'nanjing'</span>,\n label: <span class=\"hljs-string\">'南京'</span>,\n children: [{\n value: <span class=\"hljs-string\">'zhonghuamen'</span>,\n label: <span class=\"hljs-string\">'中华门'</span>,\n }],\n }],\n}];\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n xValue: [<span class=\"hljs-string\">'jiangsu'</span>, <span class=\"hljs-string\">'nanjing'</span>, <span class=\"hljs-string\">'zhonghuamen'</span>],\n testValue: <span class=\"hljs-number\">1</span>,\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-wrap\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeSelect</span>\n <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">{['alibaba',</span> '<span class=\"hljs-attribute\">platform</span>', '<span class=\"hljs-attribute\">fe</span>']}\n <span class=\"hljs-attribute\">options</span>=<span class=\"hljs-value\">{options}</span>\n <span class=\"hljs-attribute\">clearable</span>\n <span class=\"hljs-attribute\">disabled</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{(value,</span> <span class=\"hljs-attribute\">selected</span>) =&gt;</span> console.log(value, selected)}\n /&gt;\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-cascade-select-demo-disable'));</span></code></pre></div>"},"status":"public","toc":""}]

最简单的用法。

import { CascadeSelect } from 'uxcore';
const options = [{
  value: 'alibaba',
  label: '阿里巴巴',
  children: [{
    value: 'platform',
    label: '企业智能事业部',
    children: [{
      value: 'fe',
      label: '前端开发',
    }],
  }],
}, {
  value: 'beijing',
  label: '日本',
  children: [{
    value: 'xicheng',
    label: '西城',
    children: [{
      value: 'zhonggc',
      label: '中观村大街',
    }],
  }],
}, {
  value: 'tianjin',
  label: '天津',
  children: [{
    value: 'heping',
    label: '和平区',
    children: [{
      value: 'nanjinglu',
      label: '南京路',
    }],
  }, {
    value: 'hexi',
    label: '河西区',
    children: [{
      value: 'dagu',
      label: '大沽路',
    }],
  }],
}, {
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
      testValue: 1,
    };
  }

  render() {
    return (
      <div className="demo-wrap">
        <CascadeSelect
          defaultValue={['alibaba', 'platform', 'fe']}
          options={options}
          onChange={(value, selected) => console.log(value, selected)}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-select-demo-basic'));

最简单的用法。

import { CascadeSelect } from 'uxcore';
const options = [{
  value: 'alibaba',
  label: '阿里巴巴',
  children: [{
    value: 'platform',
    label: '企业智能事业部',
    children: [{
      value: 'fe',
      label: '前端开发',
    }],
  }],
}, {
  value: 'beijing',
  label: '日本',
  children: [{
    value: 'xicheng',
    label: '西城',
    children: [{
      value: 'zhonggc',
      label: '中观村大街',
    }],
  }],
}, {
  value: 'tianjin',
  label: '天津',
  children: [{
    value: 'heping',
    label: '和平区',
    children: [{
      value: 'nanjinglu',
      label: '南京路',
    }],
  }, {
    value: 'hexi',
    label: '河西区',
    children: [{
      value: 'dagu',
      label: '大沽路',
    }],
  }],
}, {
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
      testValue: 1,
    };
  }

  render() {
    return (
      <div className="demo-wrap">
        <CascadeSelect
          defaultValue={['alibaba', 'platform', 'fe']}
          options={options}
          clearable
          onChange={(value, selected) => console.log(value, selected)}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-select-demo-clear'));

提供 large、middle、small 三种尺寸

import { CascadeSelect } from 'uxcore';
const options = [{
  value: 'alibaba',
  label: '阿里巴巴',
  children: [{
    value: 'platform',
    label: '企业智能事业部',
    children: [{
      value: 'fe',
      label: '前端开发',
    }],
  }],
}, {
  value: 'beijing',
  label: '日本',
  children: [{
    value: 'xicheng',
    label: '西城',
    children: [{
      value: 'zhonggc',
      label: '中观村大街',
    }],
  }],
}, {
  value: 'tianjin',
  label: '天津',
  children: [{
    value: 'heping',
    label: '和平区',
    children: [{
      value: 'nanjinglu',
      label: '南京路',
    }],
  }, {
    value: 'hexi',
    label: '河西区',
    children: [{
      value: 'dagu',
      label: '大沽路',
    }],
  }],
}, {
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
      testValue: 1,
    };
  }

  render() {
    const cascader = (
      <CascadeSelect
        defaultValue={['alibaba', 'platform', 'fe']}
        options={options}
        clearable
        onChange={(value, selected) => console.log(value, selected)}
      />
    );
    return (
      <div className="demo-wrap">
        {['large', 'middle', 'small'].map(size => (
          <div style={{ marginBottom: '4px' }}>{React.cloneElement(cascader, { size })}</div>
          ))}
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-select-demo-size'));

最简单的用法。

import { CascadeSelect } from 'uxcore';
const options = [{
  value: 'alibaba',
  label: '阿里巴巴',
  children: [{
    value: 'platform',
    label: '企业智能事业部',
    children: [{
      value: 'fe',
      label: '前端开发',
    }],
  }],
}, {
  value: 'beijing',
  label: '日本',
  children: [{
    value: 'xicheng',
    label: '西城',
    children: [{
      value: 'zhonggc',
      label: '中观村大街',
    }],
  }],
}, {
  value: 'tianjin',
  label: '天津',
  children: [{
    value: 'heping',
    label: '和平区',
    children: [{
      value: 'nanjinglu',
      label: '南京路',
    }],
  }, {
    value: 'hexi',
    label: '河西区',
    children: [{
      value: 'dagu',
      label: '大沽路',
    }],
  }],
}, {
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
      testValue: 1,
    };
  }

  render() {
    return (
      <div className="demo-wrap">
        <CascadeSelect
          defaultValue={['alibaba', 'platform', 'fe']}
          options={options}
          clearable
          disabled
          onChange={(value, selected) => console.log(value, selected)}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-select-demo-disable'));

Props

Name Type Required Default Comments
prefixCls string false 'kuma-cascader' 默认的类名前缀
className string false '' 自定义类名
options array false [] 选项数据源,格式可见下方Demo
value array false null 可由外部控制的值
defaultValue array false [] 初始默认值
placeholder string false 'Please Select' or '请选择' placeholder
onChange function false function(value, selectedOptions) 选择完成后回调
disabled boolean false false 是否禁用
clearable boolean false false 是否支持清除
changeOnSelect boolean false false 是否将每次选择立刻显示在控件中
expandTrigger string false 'click' 次级菜单展开方式,支持 clickhover
beforeRender function false (value, selectedOptions) => selectedOptions.map(o => o && o.label).join(' / ') 处理要显示的内容
cascadeSize number false 3 级联的层级数
getPopupContainer function():HTMLElement false - 返回一个 html 元素用作 Popup 面板的容器,默认是插在body 中的一个 div
locale string false 'zh-cn' 'en-us'
miniMode boolean false true 是否是简洁显示风格
columnWidth number false 100 dropdown中每一列的宽度
displayMode string false dropdown select 或者 dropdown
getSelectPlaceholder func false function(idx){ return '请选择' } select显示模式下的placeholder生成函数
size string false large 尺寸,枚举值:large, middle, small

Demos

props.options

const options = [{
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

当不指定 dropdown 宽度时,还可以使用css来定制dropdown宽度

.kuma-cascader-submenu-empty,
.kuma-dropdown-menu-submenu {
    width: 400px; // 你想要的 dropdown 宽度
}