feat: Search新增customInputClass,placeholderClass等属性 (#845)

 Closes: #299
This commit is contained in:
derrick 2025-01-18 16:10:06 +08:00 committed by GitHub
parent 7a0d5ce972
commit 03623f4989
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 4 deletions

View File

@ -155,6 +155,8 @@ function changeSearchType({ item, index }) {
| ~~use-suffix-slot~~ | ~~是否使用输入框右侧插槽~~**(已废弃,将在下一个 minor 版本被移除,直接使用插槽即可)** | boolean | - | false | - | | ~~use-suffix-slot~~ | ~~是否使用输入框右侧插槽~~**(已废弃,将在下一个 minor 版本被移除,直接使用插槽即可)** | boolean | - | false | - |
| focus | 是否自动聚焦 | boolean | - | false | 0.1.63 | | focus | 是否自动聚焦 | boolean | - | false | 0.1.63 |
| focusWhenClear | 是否在点击清除按钮时聚焦输入框 | boolean | - | false | 0.1.63 | | focusWhenClear | 是否在点击清除按钮时聚焦输入框 | boolean | - | false | 0.1.63 |
| placeholderStyle | 原生属性,指定 placeholder 的样式目前仅支持color,font-size和font-weight | string | - | - | $LOWEST_VERSION$ |
| placeholderClass | 原生属性,指定 placeholder 的样式类 | string | - | - | $LOWEST_VERSION$ |
## Events ## Events
@ -179,3 +181,4 @@ function changeSearchType({ item, index }) {
| 类名 | 说明 | 最低版本 | | 类名 | 说明 | 最低版本 |
| ------------ | ---------- | -------- | | ------------ | ---------- | -------- |
| custom-class | 根节点样式 | - | | custom-class | 根节点样式 | - |
| custom-input-class | input 外部自定义样式 | $LOWEST_VERSION$ |

View File

@ -11,7 +11,7 @@ import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeString
export const searchProps = { export const searchProps = {
...baseProps, ...baseProps,
customInputClass: makeStringProp(''),
/** /**
* *
* 类型: string * 类型: string
@ -88,5 +88,15 @@ export const searchProps = {
* 默认值: false * 默认值: false
* 最低版本: 0.1.63 * 最低版本: 0.1.63
*/ */
focusWhenClear: makeBooleanProp(false) focusWhenClear: makeBooleanProp(false),
/**
* placeholder color,font-size和font-weight
*/
placeholderStyle: String,
/**
* placeholder
*/
placeholderClass: makeStringProp('')
} }

View File

@ -11,10 +11,11 @@
<input <input
v-if="showInput || str || placeholderLeft" v-if="showInput || str || placeholderLeft"
:placeholder="placeholder || translate('search')" :placeholder="placeholder || translate('search')"
placeholder-class="wd-search__placeholder-txt" :placeholder-class="`wd-search__placeholder-txt', ${placeholderClass}`"
:placeholder-style="placeholderStyle"
confirm-type="search" confirm-type="search"
v-model="str" v-model="str"
class="wd-search__input" :class="['wd-search__input', customInputClass]"
@focus="searchFocus" @focus="searchFocus"
@input="inputValue" @input="inputValue"
@blur="searchBlur" @blur="searchBlur"