diff --git a/packages/react-cascader/README.md b/packages/react-cascader/README.md index 8429d8cd3c..303021d838 100644 --- a/packages/react-cascader/README.md +++ b/packages/react-cascader/README.md @@ -8,7 +8,7 @@ Cascader 级联选择 级联选择框。v4.16.0中添加 ```jsx -import { Cascader } from 'uiw'; +import { Cascader, Row, Col } from 'uiw'; // or import Cascader from '@uiw/react-cascader'; ``` @@ -56,15 +56,29 @@ const Demo = () => { ]; return ( -
- < Cascader - allowClear={true} - placeholder="请选择" - value={[1, 4, 7]} - option={options} - onChange={(value, seleteds) => console.log(value, seleteds)} - /> -
+ + + console.log(value, seleteds)} + /> + + + console.log(value, seleteds)} + /> + + ) }; ReactDOM.render(, _mount_); @@ -113,16 +127,15 @@ const Demo = () => { ]; return ( -
- console.log(value, seleteds)} - onSearch={(text)=> console.log('text', text)} - /> -
+ console.log(value, seleteds)} + onSearch={(text)=> console.log('text', text)} + /> ) }; ReactDOM.render(, _mount_); @@ -244,6 +257,7 @@ ReactDOM.render(, _mount_); | 参数 | 说明 | 类型 | 默认值 | 版本 | | ---- | ---- | ---- | ---- | ---- | | allowClear | 支持清除 | Boolean | `false` | - | +| disabled | 禁用选择器 | Boolean | `false` | - | | placeholder | 选择框默认文字 | String | - | - | | option | 选项菜单 | { value: String \| Number, label: React.ReactNode, children: Array} | - | - | | value | 指定当前选中的条目,多选时为一个数组 | String[] \| Number[] | - | - | diff --git a/packages/react-cascader/src/index.tsx b/packages/react-cascader/src/index.tsx index 0e4b2d92e5..0d6906c5f5 100644 --- a/packages/react-cascader/src/index.tsx +++ b/packages/react-cascader/src/index.tsx @@ -17,6 +17,7 @@ export interface CascaderProps extends IProps, DropdownProps { onSearch?: boolean | ((searchText: string) => void); allowClear?: boolean; placeholder?: string; + disabled?: boolean; } function Cascader(props: CascaderProps) { @@ -25,6 +26,7 @@ function Cascader(props: CascaderProps) { onChange, onSearch, + disabled, allowClear, placeholder, prefixCls = 'w-cascader', @@ -131,7 +133,7 @@ function Cascader(props: CascaderProps) { onSearch && handelSearch(value); }; - const widths = (style?.width as number) * 0.5 || undefined; + const widths = (style?.width as number) * 0.7 || undefined; const OptionIter = (option: Array, level: number = 0) => { if (!option) return; @@ -178,6 +180,7 @@ function Cascader(props: CascaderProps) { trigger="click" style={{ marginTop: 5, ...style }} overlayStyl={{ width: 100 }} + disabled={disabled} {...others} onVisibleChange={onVisibleChange} isOpen={innerIsOpen} @@ -225,6 +228,7 @@ function Cascader(props: CascaderProps) { onSearch && setSearchOn(true)} @@ -232,7 +236,7 @@ function Cascader(props: CascaderProps) { readOnly={!onSearch} addonAfter={ - {selectIconType === 'close' && ( + {!disabled && selectIconType === 'close' && ( )}