组件演示

[{"title":"基本","id":"components-multi-select-demo-basic","tags":[],"filepath":"site/components/multi-select/demo/basic.md","directory":"components/multi-select/demo","filename":"basic","meta":{"title":"基本","description":"\n<p>基本使用</p>\n","order":"0","filepath":"site/components/multi-select/demo/basic.md","filename":"basic","directory":"components/multi-select/demo","id":"components-multi-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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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\n;\n\nvar Item = _uxcore.MultiSelect.Item;\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 value: ['item2', 'item15'],\n disabled: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value,\n disabled: false\n });\n console.log('onChange', arguments);\n }\n }, {\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log('onSubmit', arguments);\n }\n }, {\n key: 'render',\n value: function render() {\n var text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识', '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色', '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时', '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.MultiSelect,\n {\n className: 'test-classname-select',\n dropdownClassName: 'test-classname-dropdown',\n value: this.state.value,\n disabled: this.state.disabled,\n placeholder: '\\u9ED8\\u8BA4\\u63D0\\u793A',\n optionLabelProp: 'text',\n showSelectAll: true,\n showClear: true,\n onChange: this.handleChange.bind(this),\n onSubmit: this.handleSubmit.bind(this)\n },\n text.map(function (item, index) {\n return React.createElement(Item, { value: 'item' + index, text: item, key: index });\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-multi-select-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport classnames from 'classnames';;\n\nimport { MultiSelect } from 'uxcore';\n\nconst Item = MultiSelect.Item;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: ['item2', 'item15'],\n disabled: false,\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n disabled: false,\n });\n console.log('onChange', arguments);\n }\n handleSubmit() {\n console.log('onSubmit', arguments);\n }\n\n render() {\n const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',\n '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',\n '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',\n '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n\n return (\n &lt;div&gt;\n &lt;MultiSelect\n className=\"test-classname-select\"\n dropdownClassName=\"test-classname-dropdown\"\n value={this.state.value}\n disabled={this.state.disabled}\n placeholder=\"默认提示\"\n optionLabelProp=\"text\"\n showSelectAll\n showClear\n onChange={this.handleChange.bind(this)}\n onSubmit={this.handleSubmit.bind(this)}\n &gt;\n {text.map((item, index) =&gt; &lt;Item value={`item${index}`} text={item} key={index} /&gt;)}\n &lt;/MultiSelect&gt;\n &lt;/div&gt;\n );\n }\n}\n\n\nReactDOM.render(\n &lt;Demo /&gt;,\n document.getElementById('components-multi-select-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"最大限制","id":"components-multi-select-demo-max","tags":[],"filepath":"site/components/multi-select/demo/max.md","directory":"components/multi-select/demo","filename":"max","meta":{"title":"最大限制","description":"\n<p>最多选择 5 项 </p>\n","order":"1","filepath":"site/components/multi-select/demo/max.md","filename":"max","directory":"components/multi-select/demo","id":"components-multi-select-demo-max","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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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\n;\n\nvar Item = _uxcore.MultiSelect.Item;\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 value: ['item2', 'item15'],\n disabled: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value,\n disabled: false\n });\n console.log('onChange', arguments);\n }\n }, {\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log('onSubmit', arguments);\n }\n }, {\n key: 'render',\n value: function render() {\n var text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识', '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色', '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时', '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.MultiSelect,\n {\n value: this.state.value,\n disabled: this.state.disabled,\n maxSelect: 5,\n optionLabelProp: 'text',\n onChange: this.handleChange.bind(this),\n onSubmit: this.handleSubmit.bind(this)\n },\n text.map(function (item, index) {\n return React.createElement(Item, { value: 'item' + index, text: item, key: index });\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-multi-select-demo-max'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport classnames from 'classnames';;\n\nimport { MultiSelect } from 'uxcore';\n\nconst Item = MultiSelect.Item;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: ['item2', 'item15'],\n disabled: false,\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n disabled: false,\n });\n console.log('onChange', arguments);\n }\n handleSubmit() {\n console.log('onSubmit', arguments);\n }\n\n render() {\n const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',\n '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',\n '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',\n '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n\n return (\n &lt;div&gt;\n &lt;MultiSelect\n value={this.state.value}\n disabled={this.state.disabled}\n maxSelect={5}\n optionLabelProp=\"text\"\n onChange={this.handleChange.bind(this)}\n onSubmit={this.handleSubmit.bind(this)}\n &gt;\n {text.map((item, index) =&gt; &lt;Item value={`item${index}`} text={item} key={index} /&gt;)}\n &lt;/MultiSelect&gt;\n &lt;/div&gt;\n );\n }\n}\n\n\nReactDOM.render(\n &lt;Demo /&gt;,\n document.getElementById('components-multi-select-demo-max'));</code></pre></div>"},"status":"public","toc":""},{"title":"尺寸","id":"components-multi-select-demo-size","tags":[],"filepath":"site/components/multi-select/demo/size.md","directory":"components/multi-select/demo","filename":"size","meta":{"title":"尺寸","description":"\n<p>提供 large、middle、small 三种尺寸</p>\n","order":"1","filepath":"site/components/multi-select/demo/size.md","filename":"size","directory":"components/multi-select/demo","id":"components-multi-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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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\n;\n\nvar Item = _uxcore.MultiSelect.Item;\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 value: ['item2', 'item15'],\n disabled: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value,\n disabled: false\n });\n console.log('onChange', arguments);\n }\n }, {\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log('onSubmit', arguments);\n }\n }, {\n key: 'render',\n value: function render() {\n var text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识', '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色', '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时', '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n var multiSelect = React.createElement(\n _uxcore.MultiSelect,\n {\n value: this.state.value,\n disabled: this.state.disabled,\n optionLabelProp: 'text',\n onChange: this.handleChange.bind(this),\n onSubmit: this.handleSubmit.bind(this)\n },\n text.map(function (item, index) {\n return React.createElement(Item, { value: 'item' + index, text: item, key: index });\n })\n );\n\n return React.createElement(\n 'div',\n null,\n ['large', 'middle', 'small'].map(function (size) {\n return React.cloneElement(multiSelect, {\n size: size\n });\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-multi-select-demo-size'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport classnames from 'classnames';;\n\nimport { MultiSelect } from 'uxcore';\n\nconst Item = MultiSelect.Item;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: ['item2', 'item15'],\n disabled: false,\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n disabled: false,\n });\n console.log('onChange', arguments);\n }\n handleSubmit() {\n console.log('onSubmit', arguments);\n }\n\n render() {\n const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',\n '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',\n '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',\n '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n const multiSelect = (\n &lt;MultiSelect\n value={this.state.value}\n disabled={this.state.disabled}\n optionLabelProp=\"text\"\n onChange={this.handleChange.bind(this)}\n onSubmit={this.handleSubmit.bind(this)}\n &gt;\n {text.map((item, index) =&gt; &lt;Item value={`item${index}`} text={item} key={index} /&gt;)}\n &lt;/MultiSelect&gt;\n );\n\n return (\n &lt;div&gt;\n {['large', 'middle', 'small'].map(size =&gt; React.cloneElement(multiSelect, {\n size,\n }))}\n &lt;/div&gt;\n );\n }\n}\n\n\nReactDOM.render(\n &lt;Demo /&gt;,\n document.getElementById('components-multi-select-demo-size'));</code></pre></div>"},"status":"public","toc":""},{"title":"隐藏控制按钮","id":"components-multi-select-demo-hidebutton","tags":[],"filepath":"site/components/multi-select/demo/hidebutton.md","directory":"components/multi-select/demo","filename":"hidebutton","meta":{"title":"隐藏控制按钮","description":"\n<p>隐藏控制按钮</p>\n","order":"2","filepath":"site/components/multi-select/demo/hidebutton.md","filename":"hidebutton","directory":"components/multi-select/demo","id":"components-multi-select-demo-hidebutton","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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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\n;\n\nvar Item = _uxcore.MultiSelect.Item;\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 value: ['item2', 'item15'],\n disabled: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value,\n disabled: false\n });\n console.log('onChange', arguments);\n }\n }, {\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log('onSubmit', arguments);\n }\n }, {\n key: 'render',\n value: function render() {\n var text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识', '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色', '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时', '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.MultiSelect,\n {\n value: this.state.value,\n disabled: this.state.disabled,\n optionLabelProp: 'text',\n showSelectAll: false,\n showClear: false,\n onChange: this.handleChange.bind(this),\n onSubmit: this.handleSubmit.bind(this)\n },\n text.map(function (item, index) {\n return React.createElement(Item, { value: 'item' + index, text: item, key: index });\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-multi-select-demo-hidebutton'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport classnames from 'classnames';;\n\nimport { MultiSelect } from 'uxcore';\n\nconst Item = MultiSelect.Item;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: ['item2', 'item15'],\n disabled: false,\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n disabled: false,\n });\n console.log('onChange', arguments);\n }\n handleSubmit() {\n console.log('onSubmit', arguments);\n }\n\n render() {\n const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',\n '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',\n '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',\n '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n\n return (\n &lt;div&gt;\n &lt;MultiSelect\n value={this.state.value}\n disabled={this.state.disabled}\n optionLabelProp=\"text\"\n showSelectAll={false}\n showClear={false}\n onChange={this.handleChange.bind(this)}\n onSubmit={this.handleSubmit.bind(this)}\n &gt;\n {text.map((item, index) =&gt; &lt;Item value={`item${index}`} text={item} key={index} /&gt;)}\n &lt;/MultiSelect&gt;\n &lt;/div&gt;\n );\n }\n}\n\n\nReactDOM.render(\n &lt;Demo /&gt;,\n document.getElementById('components-multi-select-demo-hidebutton'));</code></pre></div>"},"status":"public","toc":""},{"title":"不可控制模式","id":"components-multi-select-demo-disable","tags":[],"filepath":"site/components/multi-select/demo/disable.md","directory":"components/multi-select/demo","filename":"disable","meta":{"title":"不可控制模式","description":"\n","order":"3","filepath":"site/components/multi-select/demo/disable.md","filename":"disable","directory":"components/multi-select/demo","id":"components-multi-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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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\n;\n\nvar Item = _uxcore.MultiSelect.Item;\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 value: ['item2', 'item15'],\n disabled: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value,\n disabled: false\n });\n console.log('onChange', arguments);\n }\n }, {\n key: 'handleSubmit',\n value: function handleSubmit() {\n console.log('onSubmit', arguments);\n }\n }, {\n key: 'render',\n value: function render() {\n var text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识', '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色', '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时', '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.MultiSelect,\n {\n value: this.state.value,\n disabled: true,\n placeholder: '\\u9ED8\\u8BA4\\u63D0\\u793A',\n optionLabelProp: 'text',\n onChange: this.handleChange.bind(this),\n onSubmit: this.handleSubmit.bind(this)\n },\n text.map(function (item, index) {\n return React.createElement(Item, { value: 'item' + index, text: item, key: index });\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-multi-select-demo-disable'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport classnames from 'classnames';;\n\nimport { MultiSelect } from 'uxcore';\n\nconst Item = MultiSelect.Item;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: ['item2', 'item15'],\n disabled: false,\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n disabled: false,\n });\n console.log('onChange', arguments);\n }\n handleSubmit() {\n console.log('onSubmit', arguments);\n }\n\n render() {\n const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',\n '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',\n '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',\n '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n\n return (\n &lt;div&gt;\n &lt;MultiSelect\n value={this.state.value}\n disabled\n placeholder=\"默认提示\"\n optionLabelProp=\"text\"\n onChange={this.handleChange.bind(this)}\n onSubmit={this.handleSubmit.bind(this)}\n &gt;\n {text.map((item, index) =&gt; &lt;Item value={`item${index}`} text={item} key={index} /&gt;)}\n &lt;/MultiSelect&gt;\n &lt;/div&gt;\n );\n }\n}\n\n\nReactDOM.render(\n &lt;Demo /&gt;,\n document.getElementById('components-multi-select-demo-disable'));</code></pre></div>"},"status":"public","toc":""}]
基本

基本使用


import classnames from 'classnames';;

import { MultiSelect } from 'uxcore';

const Item = MultiSelect.Item;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: ['item2', 'item15'],
      disabled: false,
    };
  }

  handleChange(value) {
    this.setState({
      value,
      disabled: false,
    });
    console.log('onChange', arguments);
  }
  handleSubmit() {
    console.log('onSubmit', arguments);
  }

  render() {
    const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',
      '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',
      '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',
      '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];

    return (
      <div>
        <MultiSelect
          className="test-classname-select"
          dropdownClassName="test-classname-dropdown"
          value={this.state.value}
          disabled={this.state.disabled}
          placeholder="默认提示"
          optionLabelProp="text"
          showSelectAll
          showClear
          onChange={this.handleChange.bind(this)}
          onSubmit={this.handleSubmit.bind(this)}
        >
          {text.map((item, index) => <Item value={`item${index}`} text={item} key={index} />)}
        </MultiSelect>
      </div>
    );
  }
}


ReactDOM.render(
  <Demo />,
 document.getElementById('components-multi-select-demo-basic'));
最大限制

最多选择 5 项 


import classnames from 'classnames';;

import { MultiSelect } from 'uxcore';

const Item = MultiSelect.Item;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: ['item2', 'item15'],
      disabled: false,
    };
  }

  handleChange(value) {
    this.setState({
      value,
      disabled: false,
    });
    console.log('onChange', arguments);
  }
  handleSubmit() {
    console.log('onSubmit', arguments);
  }

  render() {
    const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',
      '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',
      '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',
      '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];

    return (
      <div>
        <MultiSelect
          value={this.state.value}
          disabled={this.state.disabled}
          maxSelect={5}
          optionLabelProp="text"
          onChange={this.handleChange.bind(this)}
          onSubmit={this.handleSubmit.bind(this)}
        >
          {text.map((item, index) => <Item value={`item${index}`} text={item} key={index} />)}
        </MultiSelect>
      </div>
    );
  }
}


ReactDOM.render(
  <Demo />,
 document.getElementById('components-multi-select-demo-max'));
尺寸

提供 large、middle、small 三种尺寸


import classnames from 'classnames';;

import { MultiSelect } from 'uxcore';

const Item = MultiSelect.Item;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: ['item2', 'item15'],
      disabled: false,
    };
  }

  handleChange(value) {
    this.setState({
      value,
      disabled: false,
    });
    console.log('onChange', arguments);
  }
  handleSubmit() {
    console.log('onSubmit', arguments);
  }

  render() {
    const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',
      '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',
      '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',
      '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];
    const multiSelect = (
      <MultiSelect
        value={this.state.value}
        disabled={this.state.disabled}
        optionLabelProp="text"
        onChange={this.handleChange.bind(this)}
        onSubmit={this.handleSubmit.bind(this)}
      >
        {text.map((item, index) => <Item value={`item${index}`} text={item} key={index} />)}
      </MultiSelect>
      );

    return (
      <div>
        {['large', 'middle', 'small'].map(size => React.cloneElement(multiSelect, {
          size,
        }))}
      </div>
    );
  }
}


ReactDOM.render(
  <Demo />,
 document.getElementById('components-multi-select-demo-size'));
隐藏控制按钮

隐藏控制按钮


import classnames from 'classnames';;

import { MultiSelect } from 'uxcore';

const Item = MultiSelect.Item;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: ['item2', 'item15'],
      disabled: false,
    };
  }

  handleChange(value) {
    this.setState({
      value,
      disabled: false,
    });
    console.log('onChange', arguments);
  }
  handleSubmit() {
    console.log('onSubmit', arguments);
  }

  render() {
    const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',
      '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',
      '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',
      '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];

    return (
      <div>
        <MultiSelect
          value={this.state.value}
          disabled={this.state.disabled}
          optionLabelProp="text"
          showSelectAll={false}
          showClear={false}
          onChange={this.handleChange.bind(this)}
          onSubmit={this.handleSubmit.bind(this)}
        >
          {text.map((item, index) => <Item value={`item${index}`} text={item} key={index} />)}
        </MultiSelect>
      </div>
    );
  }
}


ReactDOM.render(
  <Demo />,
 document.getElementById('components-multi-select-demo-hidebutton'));
不可控制模式

import classnames from 'classnames';;

import { MultiSelect } from 'uxcore';

const Item = MultiSelect.Item;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: ['item2', 'item15'],
      disabled: false,
    };
  }

  handleChange(value) {
    this.setState({
      value,
      disabled: false,
    });
    console.log('onChange', arguments);
  }
  handleSubmit() {
    console.log('onSubmit', arguments);
  }

  render() {
    const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',
      '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',
      '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',
      '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];

    return (
      <div>
        <MultiSelect
          value={this.state.value}
          disabled
          placeholder="默认提示"
          optionLabelProp="text"
          onChange={this.handleChange.bind(this)}
          onSubmit={this.handleSubmit.bind(this)}
        >
          {text.map((item, index) => <Item value={`item${index}`} text={item} key={index} />)}
        </MultiSelect>
      </div>
    );
  }
}


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

Props

MulitSelect

配置项 类型 必填 默认值 功能/备注
value array required [] 由 value 组成的数组，与 React 受限组件表现一致，选中项与 value 保持一致，数组中的值与 item 的 value 相对应
onChange function required - 与 React 受限组件表现一致，在 checkbox 群发生改变时触发，借此来更改 value
disabled boolean optional false 是否为 disable 状态
className string optional '' 选择框的classname
dropdownClassName string optional '' 下拉框的classname
placeholder string optional '' -
titleBreakStr string optional '、' 选中选项在选择框中的链接符
optionLabelProp string optional 'text' item中的哪一个prop作为选项展示的label
maxSelect number optional - 最多可选选项数量
showSelectAll boolean optional true 是否显示全选按钮(如果maxSelect小于实际数量则该按钮成为disabled状态)
showClear boolean optional true 是否显示清空按钮
onSubmit function optional - 点击确认时的回调函数，返回valueList数组和labelList数组
size string optional large 尺寸，枚举值 large, middle, small

MulitSelectItem

通过 MulitSelect.Item 取得。实际prop与checkboxGroup.Item相同

配置项 类型 必填 默认值 功能/备注
text string optinal - checkbox 后面跟着的说明文字
value string required - checkbox 对应的值