From 34632db09b6502682bc73a225bf2af5a6a906472 Mon Sep 17 00:00:00 2001 From: "liyuan.meng" <13149260506@163.com> Date: Mon, 30 Jun 2025 16:16:54 +0800 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20[Select]=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E9=80=89=E9=A1=B9=E9=87=8A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/select/demos/info.md | 118 ++++++++++++++++++ src/components/select/index.js | 21 +++- src/components/select/index.less | 29 +++++ src/components/select/index.md | 113 +++++++++-------- src/components/select/views/option.js | 25 +++- .../select/views/select/multi-select.js | 98 +++++++++++---- .../select/views/select/single-select.js | 45 ++++++- 7 files changed, 363 insertions(+), 86 deletions(-) create mode 100644 src/components/select/demos/info.md diff --git a/src/components/select/demos/info.md b/src/components/select/demos/info.md new file mode 100644 index 00000000..5826040d --- /dev/null +++ b/src/components/select/demos/info.md @@ -0,0 +1,118 @@ +--- +order: 2 +title: 基本使用 +desc: 基本使用 +--- + +```jsx +/** + * title: 下拉选项释义 + * desc: 下拉选项释义 + */ +import React, { useState } from 'react'; +import { Select } from 'cloud-react'; + +const Option = Select.Option; + +const dataList = [ + { + label: 'JQuery', + value: '1', + selectInfo: 'JQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQuery' + }, + { + label: 'Vue', + value: '2' + }, + { + label: 'React', + value: '3', + selectInfo: 'ReactReactReactReactReactReactReactReactReact' + }, + { + label: 'Angular', + value: '4', + selectInfo: '11212122' + }, + { + label: 'Angular1', + value: '41', + selectInfo: '11212122' + }, + { + label: 'Angular2', + value: '42', + selectInfo: '11212122' + }, + { + label: 'Angular3', + value: '43', + selectInfo: '11212122' + }, + { + label: 'Angular4', + value: '44', + selectInfo: '11212122' + }, + { + label: 'Angular5', + value: '45', + selectInfo: '11212122' + }, + { + label: 'Angular6', + value: '46', + selectInfo: '11212122' + }, + { + label: 'Angular7', + value: '47', + selectInfo: '11212122' + }, +]; + +export default function SelectDemo() { + const handleChange = (value, prevValue) => { + console.log('select --- ' + value); + console.log('prevSelect --- ' + prevValue); + }; + + return ( +
+
+
+
单选
+ +
+
+
+ ); +} +``` diff --git a/src/components/select/index.js b/src/components/select/index.js index 41b31298..6e111df0 100644 --- a/src/components/select/index.js +++ b/src/components/select/index.js @@ -95,6 +95,7 @@ class Select extends Component { style: {}, searchValue: '', isSearch: false, + hoveredOption: null, }; this.node = React.createRef(); this.optionsNode = React.createRef(); @@ -506,6 +507,10 @@ class Select extends Component { this.setState({ searchValue: v }); }; + onHoverChange = (item) => { + this.setState({ hoveredOption: item }); + }; + renderOptions() { const { multiple, confirmTemplate, dataSource } = this.props; const { value } = this.state; @@ -523,6 +528,7 @@ class Select extends Component { onSearchValueChange={this.onSearchValueChange} handleSelect={this.handleSelect} searchValue={this.state.searchValue} + onHoverChange={this.onHoverChange} /> ); } @@ -548,6 +554,7 @@ class Select extends Component { onChange={this.onSimpleOptionChange} searchValue={this.state.searchValue} onSearchValueChange={this.onSearchValueChange} + onHoverChange={this.onHoverChange} /> ); } @@ -567,9 +574,10 @@ class Select extends Component { supportUnlimited, formSize, dataSource, + dropdownConfig, ...otherProps } = this.props; - const { selected, open, style: popupStyle } = this.state; + const { selected, open, style: popupStyle, hoveredOption } = this.state; const { width } = this.selectedContainerStyle; const classNames = classnames( `${selector}`, @@ -581,7 +589,13 @@ class Select extends Component {
{this.renderOptions()}
@@ -676,6 +690,8 @@ Select.propTypes = { selectAllText: PropTypes.string, borderRadiusSize: PropTypes.oneOf(['default', 'medium', 'large']), checkboxStyle: PropTypes.object, + dropdownConfig: PropTypes.object, + selectInfoKey: PropTypes.string, }; Select.defaultProps = { @@ -726,6 +742,7 @@ Select.defaultProps = { selectAllText: '全选', borderRadiusSize: 'default', checkboxStyle: {}, + selectInfoKey: 'selectInfo', }; export default Select; diff --git a/src/components/select/index.less b/src/components/select/index.less index 55fa922b..1f213cda 100644 --- a/src/components/select/index.less +++ b/src/components/select/index.less @@ -627,3 +627,32 @@ font-size: 12px; } } + + +.@{select-prefix-cls}-select-panel-container { + display: flex; + position: relative; + + .@{select-prefix-cls}-info-panel { + position: relative; + left: -2px; + padding: 0 12px 14px 12px; + color: #222; + font-size: 14px; + line-height: 22px; + z-index: 10; + border-left: 1px solid #E8E8E8; + + &-title { + font-weight: 600; + font-size: 16px; + margin-bottom: 8px; + } + + &-content { + color: #666; + white-space: pre-line; + word-break: break-all; + } + } +} \ No newline at end of file diff --git a/src/components/select/index.md b/src/components/select/index.md index 9316d0d6..8dcf5512 100644 --- a/src/components/select/index.md +++ b/src/components/select/index.md @@ -24,59 +24,61 @@ group: ## Props ### Select Props -| 属性 | 说明 | 类型 | 默认值 | -| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------- | -| allowClear | 是否支持一键清除 | boolean | false | -| multiple | 是否为多选 | boolean | false | -| disabled | 下拉禁用状态 | boolean | false | -| size | 输入框大小，可选值为 `large` `default` `small` | string | `default` | -| dataSource | 需要展示的数据，dataSource 和 children 同时存在时以 children 为准 | array | [] | -| labelKey | 指定使用的 label 键值，仅在使用 dataSource 生成组件时生效 | string | 'label' | -| valueKey | 指定使用的 value 键值，仅在使用 dataSource 生成组件时生效 | string | 'value' | -| descKey | 指定次要信息的 value 键值，仅在使用 dataSource 生成组件时生效 | string | 'value' | -| defaultOpen | 默认下拉菜单展开状态 | boolean | false | -| open | 下拉菜单展开状态，当使用此属性时组件本身 open 行为失效 | boolean | false | -| placeholder | 选择框默认文案 | string | - | -| searchable | 支持搜索 | boolean | false | -| showTag | 多选下拉已选项为tag形式，如果设置成 `false`，则已选项为逗号分隔的形式，超长展示省略号 | boolean | true | -| scrollSelected | 设置 `scrollSelected` 为 `true`，则已选项超长可滚动 | boolean | false | -| scrollItem | 设置 `scrollItem` 为 `true`，则下拉选项超长可滚动 | boolean | false | -| maxTagCount | 多选下拉最多显示多少个tag | number | 1 | -| maxHeight | 多选下拉框最大高度 | number | - | -| searchPlaceholder | 搜索框默认文案 | string | - | -| emptyRender | 数据为空时下拉框显示内容 | string \| node | '暂无数据'+缺省图 | -| defaultValue | 默认选中的项 | string \| number \| array | - | -| value | 选中的项 | string \| number \| array | - | -| labelInValue | 是否把每个选项的 label 包装到 value 中 | boolean | false | -| hasSelectAll | 多选时是否有全选 | boolean | false | -| hasConfirmButton | 多选时是否有确认按钮 | boolean | false | -| isSupportTitle | 鼠标 hover 选项是否显示完整内容 | boolean | false | -| okBtnText | 多选时确认操作按钮文案 | string | '确认' | -| cancelBtnText | 多选时取消操作按钮文案 | string | '取消' | -| className | 组件的 className 属性 | string | - | -| trigger | 下拉触发方式，支持 click 和 hover | string | 'click' | -| showArrow | 下拉 icon 是否显示 | boolean | true | -| showSelectStyle | 选择器样式是否显示 | boolean | true | -| isAppendToBody | 下拉框是否渲染在 body 上 | boolean | false | | -| position | 下拉框定位：`top` `bottom` `auto`（是否启用自动定位，如需使用可设置为`auto`） | string | `bottom` | -| onChange | 选中 option 变化时回调此函数，普通单选树回调包含第三个参数返回当前点击选项的原始数据，如不使用 dataSource 生成组件，则需手动指定 option 的 item 属性 | function(value, oldValue) | - | -| onOk | 多选时确认操作回调函数 | function(value: array, oldValue: array) | - | -| onCancel | 多选时取消操作回调函数 | function | - | -| onSearch | 搜索文本框变化时回调此函数 | function(value: string) | - | -| onSelectOpen | 下拉选择框弹开的时候回调此函数 | function | - | -| onSelectClose | 下拉选择框关闭的时候回调此函数 | function | - | -| onBeforeChange | 确认选择值之前回调此函数，仅支持单选 | function(value) | - | -| confirmTemplate | 自定义确认取消按钮模板(适用于多选下拉) | function:({ onOk, onCancel }) | 组件默认模板 | -| supportLightText | 是否支持搜索高亮关键字 | boolean | false | -| lightTextColor | 高亮关键字颜色 | string | #0055CC | -| supportUnlimited | 多选下拉是否支持不限 | boolean | false | -| unlimitedLabel | 修改"不限"文本 | string | 不限 | -| dropdownClassName | 下拉框类名 | string | - | -| dropdownStyle | 下拉框样式 | object | {} | -| selectAllText | 全选文案 | string | '全选' | -| borderRadiusSize | 边框圆角 `default` `medium` `large` | string | `default` | -| optionRender | 自定义下拉回填选项 | function | - | -| checkboxStyle | 多选框样式 | object | {} | +| 属性 | 说明 | 类型 | 默认值 | +|-------------------|---------------------------------------------------------------------------------------------|-----------------------------------------|----------| +| allowClear | 是否支持一键清除 | boolean | false | +| multiple | 是否为多选 | boolean | false | +| disabled | 下拉禁用状态 | boolean | false | +| size | 输入框大小，可选值为 `large` `default` `small` | string | `default` | +| dataSource | 需要展示的数据，dataSource 和 children 同时存在时以 children 为准 | array | [] | +| labelKey | 指定使用的 label 键值，仅在使用 dataSource 生成组件时生效 | string | 'label' | +| valueKey | 指定使用的 value 键值，仅在使用 dataSource 生成组件时生效 | string | 'value' | +| descKey | 指定次要信息的 value 键值，仅在使用 dataSource 生成组件时生效 | string | 'value' | +| defaultOpen | 默认下拉菜单展开状态 | boolean | false | +| open | 下拉菜单展开状态，当使用此属性时组件本身 open 行为失效 | boolean | false | +| placeholder | 选择框默认文案 | string | - | +| searchable | 支持搜索 | boolean | false | +| showTag | 多选下拉已选项为tag形式，如果设置成 `false`，则已选项为逗号分隔的形式，超长展示省略号 | boolean | true | +| scrollSelected | 设置 `scrollSelected` 为 `true`，则已选项超长可滚动 | boolean | false | +| scrollItem | 设置 `scrollItem` 为 `true`，则下拉选项超长可滚动 | boolean | false | +| maxTagCount | 多选下拉最多显示多少个tag | number | 1 | +| maxHeight | 多选下拉框最大高度 | number | - | +| searchPlaceholder | 搜索框默认文案 | string | - | +| emptyRender | 数据为空时下拉框显示内容 | string \ | node | '暂无数据'+缺省图 | +| defaultValue | 默认选中的项 | string \ | number \ | array | - | +| value | 选中的项 | string \ | number \ | array | - | +| labelInValue | 是否把每个选项的 label 包装到 value 中 | boolean | false | +| hasSelectAll | 多选时是否有全选 | boolean | false | +| hasConfirmButton | 多选时是否有确认按钮 | boolean | false | +| isSupportTitle | 鼠标 hover 选项是否显示完整内容 | boolean | false | +| okBtnText | 多选时确认操作按钮文案 | string | '确认' | +| cancelBtnText | 多选时取消操作按钮文案 | string | '取消' | +| className | 组件的 className 属性 | string | - | +| trigger | 下拉触发方式，支持 click 和 hover | string | 'click' | +| showArrow | 下拉 icon 是否显示 | boolean | true | +| showSelectStyle | 选择器样式是否显示 | boolean | true | +| isAppendToBody | 下拉框是否渲染在 body 上 | boolean | false | | +| position | 下拉框定位：`top` `bottom` `auto`（是否启用自动定位，如需使用可设置为`auto`） | string | `bottom` | +| onChange | 选中 option 变化时回调此函数，普通单选树回调包含第三个参数返回当前点击选项的原始数据，如不使用 dataSource 生成组件，则需手动指定 option 的 item 属性 | function(value, oldValue) | - | +| onOk | 多选时确认操作回调函数 | function(value: array, oldValue: array) | - | +| onCancel | 多选时取消操作回调函数 | function | - | +| onSearch | 搜索文本框变化时回调此函数 | function(value: string) | - | +| onSelectOpen | 下拉选择框弹开的时候回调此函数 | function | - | +| onSelectClose | 下拉选择框关闭的时候回调此函数 | function | - | +| onBeforeChange | 确认选择值之前回调此函数，仅支持单选 | function(value) | - | +| confirmTemplate | 自定义确认取消按钮模板(适用于多选下拉) | function:({ onOk, onCancel }) | 组件默认模板 | +| supportLightText | 是否支持搜索高亮关键字 | boolean | false | +| lightTextColor | 高亮关键字颜色 | string | #0055CC | +| supportUnlimited | 多选下拉是否支持不限 | boolean | false | +| unlimitedLabel | 修改"不限"文本 | string | 不限 | +| dropdownClassName | 下拉框类名 | string | - | +| dropdownStyle | 下拉框样式 | object | {} | +| selectAllText | 全选文案 | string | '全选' | +| borderRadiusSize | 边框圆角 `default` `medium` `large` | string | `default` | +| optionRender | 自定义下拉回填选项 | function | - | +| checkboxStyle | 多选框样式 | object | {} | +| dropdownConfig | 下拉框配置，使用方法查看 `下拉选项释义demo` | object | {} | +| selectInfoKey | 下拉释义字段 key | string | `selectInfo` | ### Option Props @@ -101,6 +103,8 @@ group: ## 代码演示 + + ### 基础使用 @@ -119,6 +123,9 @@ group: ### 分组可搜索 +### 下拉选项释义 + + ### 自定义下拉选项 diff --git a/src/components/select/views/option.js b/src/components/select/views/option.js index 048665d8..4143d075 100644 --- a/src/components/select/views/option.js +++ b/src/components/select/views/option.js @@ -26,6 +26,8 @@ export default function Option(props) { scrollItem, searchable, optionRender, + onHover = noop, + item, ...otherProps } = props; @@ -56,6 +58,7 @@ export default function Option(props) { if (disabled) return; onChange(props); + onHover(null); }; const classNames = classnames( `${selector}-option ${scrollItem ? 'scroll-item' : 'overflow-ellipsis'}`, @@ -63,18 +66,34 @@ export default function Option(props) { className, ); + const handleMouseEnter = () => { + if (onHover && item) { + onHover(item); + } + }; + const handleMouseLeave = () => { + if (onHover) { + onHover(null); + } + }; + if (multiple) { const { value, children, checkboxStyle } = otherProps; return hideCheckbox ? ( - // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions ) : ( -