feat: 优化 Select 的 placeholder 实现

limaofeng · Jul 13, 2022 · ae19f97 · ae19f97
1 parent 36c0218
commit ae19f97
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/properties/data-entry/Select.tsx b/src/properties/data-entry/Select.tsx
@@ -14,8 +14,8 @@ import {
   SelectProps,
 } from '../typings';
 
-function defaultRenderTitle(value?: SelectOption, placeholder?: string) {
-  return value?.label || placeholder;
+function defaultRenderTitle(value?: SelectOption) {
+  return value?.label;
 }
 
 function defaultCompare(value: string, option: SelectOption) {
@@ -110,7 +110,7 @@ const Select = (props: SelectProps) => {
     placeholder = '请选择',
     popover: SelectPopover = SelectModal,
     popoverClassName,
-    dropdownMatchSelectWidth,
+    dropdownMatchSelectWidth = true,
     className,
   } = props;
   const ref = useRef<HTMLDivElement>(null);
@@ -192,7 +192,9 @@ const Select = (props: SelectProps) => {
         onClick={handleClick}
       >
         {icon && renderIcon(icon)}
-        <div className="select-title">{renderTitle(getOption(options, value!), placeholder)}</div>
+        <div className="select-title" placeholder={placeholder}>
+          {renderTitle(getOption(options, value!))}
+        </div>
         <div className="indicator">
           <Icon name="AsanyEditor/DownArrow" />
         </div>

diff --git a/src/style/design.less b/src/style/design.less
@@ -552,6 +552,12 @@
     height: 28px;
   }
 
+  .select-title[placeholder]:empty:before {
+    color: #bfbfbf;
+    background-color: transparent;
+    content: attr(placeholder);
+  }
+
   &:not(:disabled):hover {
     border: 1px solid var(--selected-background-color);
     border-radius: 2px;