Showing
2 changed files
with
24 additions
and
21 deletions
1 | 1 | import { DownOutlined, UpOutlined } from '@ant-design/icons'; |
2 | 2 | import { useSetState } from 'ahooks'; |
3 | -import { Dropdown, Input } from 'antd'; | |
3 | +import {Button, Dropdown, Input } from 'antd'; | |
4 | 4 | import type { InputProps } from 'antd/lib/input'; |
5 | 5 | import cls from 'classnames'; |
6 | 6 | import React, { useImperativeHandle } from 'react'; |
... | ... | @@ -83,30 +83,31 @@ export const QxInputSelect = React.forwardRef<any, InputSelectProps>( |
83 | 83 | } |
84 | 84 | }} |
85 | 85 | onOpenChange={onVisibleChange} |
86 | - disabled={disabled} | |
86 | + disabled={true} | |
87 | 87 | > |
88 | 88 | <> |
89 | 89 | { |
90 | 90 | from === 'FORM'? |
91 | - <div | |
92 | - className={'qx-input-select__div'} | |
91 | + <Button | |
92 | + disabled={disabled} | |
93 | + className={`qx-input-select__button`} | |
93 | 94 | tabIndex={1} |
94 | 95 | onClick={() => setState({ visible: !state.visible })} |
95 | 96 | > |
96 | 97 | {props?.prefix} |
97 | 98 | { !props?.value ? |
98 | - <span className={'qx-input-select__div-main qx-input-select__div-placeholder'}>{props?.placeholder}</span>: | |
99 | - <span className={'qx-input-select__div-main'}> | |
99 | + <span className={'qx-input-select__button-main qx-input-select__button-placeholder'}>{props?.placeholder}</span>: | |
100 | + <span className={'qx-input-select__button-main'}> | |
100 | 101 | <span>{props?.appName}</span> |
101 | 102 | <QxBaseIcon |
102 | 103 | type="qx-icon-left" |
103 | - className={'qx-input-select__div-svg'} | |
104 | + className={'qx-input-select__button-svg'} | |
104 | 105 | /> |
105 | 106 | <span>{props?.value}</span> |
106 | 107 | </span> |
107 | 108 | } |
108 | 109 | {inputSuffix} |
109 | - </div>: | |
110 | + </Button>: | |
110 | 111 | <Input |
111 | 112 | placeholder="请选择" |
112 | 113 | readOnly | ... | ... |
... | ... | @@ -70,9 +70,8 @@ |
70 | 70 | } |
71 | 71 | } |
72 | 72 | |
73 | -.qx-input-select__div { | |
73 | +.qx-input-select__button { | |
74 | 74 | height: 32px; |
75 | - border: 1px solid #d9d9d9; | |
76 | 75 | border-radius: 4px; |
77 | 76 | padding: 4px 11px; |
78 | 77 | display: flex; |
... | ... | @@ -80,18 +79,13 @@ |
80 | 79 | font-size: 14px; |
81 | 80 | cursor: text; |
82 | 81 | transition: all .3s; |
82 | + width: 100%; | |
83 | 83 | |
84 | - &:hover { | |
85 | - border-color: @B8; | |
86 | - } | |
87 | - | |
88 | - &:focus { | |
89 | - border-color: @B8; | |
90 | - box-shadow: 0 0 0 2px @B3; | |
91 | - outline: none; | |
84 | + .qx-form-select__input-prefix { | |
85 | + color: @B8; | |
92 | 86 | } |
93 | 87 | |
94 | - &-main { | |
88 | + .qx-input-select__button-main { | |
95 | 89 | height: 22px; |
96 | 90 | line-height: 22px; |
97 | 91 | margin: 0 4px; |
... | ... | @@ -103,7 +97,7 @@ |
103 | 97 | text-overflow: ellipsis; |
104 | 98 | white-space: nowrap; |
105 | 99 | |
106 | - .qx-input-select__div-svg { | |
100 | + .qx-input-select__button-svg { | |
107 | 101 | color: @N7; |
108 | 102 | transform: rotate(180deg); |
109 | 103 | font-size: 16px; |
... | ... | @@ -111,7 +105,7 @@ |
111 | 105 | } |
112 | 106 | |
113 | 107 | } |
114 | - &-placeholder { | |
108 | + .qx-input-select__button-placeholder { | |
115 | 109 | color: @N6; |
116 | 110 | } |
117 | 111 | .qx-input-select__input-suffix { |
... | ... | @@ -120,4 +114,12 @@ |
120 | 114 | .qx-form-select__input-prefix { |
121 | 115 | color: @B8; |
122 | 116 | } |
117 | + | |
118 | + .ant-dropdown-menu .ant-dropdown-menu-title-content { | |
119 | + flex: unset; | |
120 | + } | |
121 | + .ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover { | |
122 | + color: unset; | |
123 | + } | |
124 | + | |
123 | 125 | } | ... | ... |