feat(pro:search): support searchField placeholder (#1322)

IDuxFE · Dec 14, 2022 · 84d0e66 · 84d0e66
1 parent 7cec4ec
commit 84d0e66
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 1 deletion.
diff --git a/packages/pro/search/demo/Basic.vue b/packages/pro/search/demo/Basic.vue
@@ -37,6 +37,7 @@ const searchFields: SearchField[] = [
     type: 'input',
     label: 'Keyword',
     multiple: true,
+    placeholder: 'please input keyword',
     fieldConfig: {
       trim: true,
     },

diff --git a/packages/pro/search/docs/Api.zh.md b/packages/pro/search/docs/Api.zh.md
@@ -66,6 +66,7 @@ interface SearchItemConfirmContext<V = unknown> extends Partial<SearchValue<V>>
 | `defaultOperator` | 默认的操作符 | `string` | - | - | 提供时，会自动填入默认的操作符 |
 | `defaultValue` | 默认值 | - | - | - | 提供时，会自动填入默认值 |
 | `inputClassName` | 输入框class | `string` | - | - | 用于自定义输入框样式 |
+| `placeholder` | 输入框placeholder | `string` | - | - | 搜索值输入框的占位符 |
 | `validator` | 搜索项校验函数 | `(value: SearchValue) => { message?: string } | undefined` | - | - | 返回错误信息 |
 
 #### InputSearchField

diff --git a/packages/pro/search/src/searchItem/Segment.tsx b/packages/pro/search/src/searchItem/Segment.tsx
@@ -160,6 +160,8 @@ export default defineComponent({
         class={inputClasses.value}
         value={props.input ?? ''}
         disabled={props.disabled}
+        title={props.segment.placeholder}
+        placeholder={props.segment.placeholder}
         onInput={handleInput}
         onCompositionstart={handleCompositionStart}
         onCompositionend={handleCompositionEnd}
@@ -206,7 +208,7 @@ export default defineComponent({
             renderTrigger()
           )}
           <span class={`${prefixCls}-measure-span`} ref={measureSpanRef}>
-            {props.input ?? ''}
+            {props.input || props.segment.placeholder || ''}
           </span>
         </span>
       )

diff --git a/packages/pro/search/src/segments/CreateDatePickerSegment.tsx b/packages/pro/search/src/segments/CreateDatePickerSegment.tsx
@@ -53,6 +53,7 @@ export function createDatePickerSegment(
   return {
     name: searchField.type,
     inputClassName: [inputClassName, `${prefixCls}-date-picker-segment-input`],
+    placeholder: searchField.placeholder,
     defaultValue,
     parse: input => parseInput(input, dateConfig, searchField),
     format: value => formatValue(value, dateConfig, searchField),

diff --git a/packages/pro/search/src/segments/CreateDateRangePickerSegment.tsx b/packages/pro/search/src/segments/CreateDateRangePickerSegment.tsx
@@ -54,6 +54,7 @@ export function createDateRangePickerSegment(
   return {
     name: searchField.type,
     inputClassName: [inputClassName, `${prefixCls}-date-range-picker-segment-input`],
+    placeholder: searchField.placeholder,
     defaultValue,
     parse: input => parseInput(input, dateConfig, searchField),
     format: value => formatValue(value, dateConfig, searchField),

diff --git a/packages/pro/search/src/segments/CreateSelectSegment.tsx b/packages/pro/search/src/segments/CreateSelectSegment.tsx
@@ -80,6 +80,7 @@ export function createSelectSegment(
   return {
     name: searchField.type,
     inputClassName: [inputClassName, `${prefixCls}-select-segment-input`],
+    placeholder: searchField.placeholder,
     defaultValue,
     parse: input => parseInput(input, searchField),
     format: value => formatValue(value, searchField),

diff --git a/packages/pro/search/src/segments/createCustomSegment.ts b/packages/pro/search/src/segments/createCustomSegment.ts
@@ -23,6 +23,7 @@ export function createCustomSegment(prefixCls: string, searchField: CustomSearch
   return {
     name: 'custom',
     inputClassName: [inputClassName, `${prefixCls}-custom-segment-input`],
+    placeholder: searchField.placeholder,
     defaultValue,
     parse,
     format,

diff --git a/packages/pro/search/src/segments/createInputSegment.ts b/packages/pro/search/src/segments/createInputSegment.ts
@@ -17,6 +17,7 @@ export function createInputSegment(prefixCls: string, searchField: InputSearchFi
   return {
     name: 'input',
     inputClassName: [inputClassName, `${prefixCls}-input-segment-input`],
+    placeholder: searchField.placeholder,
     defaultValue,
     parse: input => input,
     format: value => (trim ? value?.trim() : value) ?? '',

diff --git a/packages/pro/search/style/index.less b/packages/pro/search/style/index.less
@@ -1,6 +1,7 @@
 @import '../../style/mixins/reset.less';
 @import '../../../components/select/style/index.less';
 @import '../../../components/style/mixins/ellipsis.less';
+@import '../../../components//style//mixins//placeholder.less';
 
 .@{pro-search-prefix} {
   .reset-component();
@@ -44,6 +45,7 @@
   &-placeholder {
     color: @pro-search-placeholder-color;
     padding: 0 @pro-search-placeholder-padding-horizontal;
+    .ellipsis();
   }
   &-clear-icon {
     position: absolute;
@@ -189,6 +191,8 @@
       height: 100%;
       max-width: 100%;
       outline: none;
+
+      .placeholder(@pro-search-placeholder-color);
     }
 
     &-overlay {