diff --git a/packages/products/tdesign-miniprogram/src/search/props.ts b/packages/products/tdesign-miniprogram/src/search/props.ts index 870e1cde..e875653e 100644 --- a/packages/products/tdesign-miniprogram/src/search/props.ts +++ b/packages/products/tdesign-miniprogram/src/search/props.ts @@ -6,17 +6,18 @@ import { TdSearchProps } from './type'; const props: TdSearchProps = { - /** 用于自定义搜索框右侧内容,如:“取消” */ + /** 自定义右侧操作按钮文字 */ action: { type: String, value: '', }, - /** 【开发中】联想词列表,如果不存在或长度为 0 则不显示联想框。可以使用函数 `label` 自定义联想词为任意内容;也可使用插槽 `option` 定义联想词内容,插槽参数为 `{ option: AutocompleteOption; index: number }`。如果 `group` 值为 `true` 则表示当前项为分组标题 */ - autocompleteOptions: { - type: Array, + /** 键盘弹起时,是否自动上推页面 */ + adjustPosition: { + type: Boolean, + value: true, }, - /** 是否默认聚焦 */ - autofocus: { + /** 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) */ + alwaysEmbed: { type: Boolean, value: false, }, @@ -25,47 +26,90 @@ const props: TdSearchProps = { type: Boolean, value: false, }, - /** 是否可清空 */ + /** 是否启用清除控件 */ clearable: { type: Boolean, value: true, }, - /** 禁用状态 */ - disabled: { + /** 点击键盘右下角按钮时是否保持键盘不收起 */ + confirmHold: { type: Boolean, + value: false, }, - /** 组件外部样式类名,分别用于设置组件外层类名、输入框类名、输入框容器类名、右侧 cancel 文本类名、左侧图标类名、右侧图标类型 */ - externalClasses: { - type: Array, + /** 设置键盘右下角按钮的文字,仅在type='text'时生效。
具体释义:
`send` 右下角按钮为“发送”;
`search` 右下角按钮为“搜索”;
`next` 右下角按钮为“下一个”;
`go` 右下角按钮为“前往”;
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) */ + confirmType: { + type: String, + value: 'search', + }, + /** 指定 focus 时的光标位置 */ + cursor: { + type: Number, + required: true, }, - /** 自定义过滤方法,用于对现有数据进行搜索过滤,判断是否过滤某一项数据。其中参数 `keyword` 指当前的搜索词,参数 `option` 指每一项联想词,函数返回 true 则显示当前联想词,函数返回 `false` 则隐藏当前联想词 */ - filter: { - type: null, + /** 搜索框聚焦时底部与键盘的距离 */ + cursorSpacing: { + type: Number, + value: 0, }, - /** 是否聚焦,同小程序官方属性 */ + /** 是否禁用 */ + disabled: { + type: Boolean, + value: false, + }, + /** 是否聚焦 */ focus: { type: Boolean, value: false, }, - /** 搜索框内部左侧内容,位于 `prefixIcon` 左侧 */ - label: { + /** focus时,点击页面的时候不收起键盘 */ + holdKeyboard: { + type: Boolean, + value: false, + }, + /** 左侧图标 */ + leftIcon: { type: String, - value: '', + value: 'search', + }, + /** 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */ + maxcharacter: { + type: Number, + }, + /** 用户最多可以输入的文本长度,一个中文等于一个计数长度。默认为 -1,不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */ + maxlength: { + type: Number, + value: -1, }, /** 占位符 */ placeholder: { type: String, value: '', }, - /** 前置图标,默认为搜索图标。值为 `null` 时则不显示 */ - prefixIcon: { + /** 指定 placeholder 的样式类 */ + placeholderClass: { type: String, - value: 'search', + value: 'input-placeholder', }, - /** 只读状态 */ - readonly: { - type: Boolean, - value: false, + /** 指定 placeholder 的样式 */ + placeholderStyle: { + type: String, + value: '', + required: true, + }, + /** 预览结果列表 */ + resultList: { + type: Array, + value: [], + }, + /** 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 */ + selectionEnd: { + type: Number, + value: -1, + }, + /** 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 */ + selectionStart: { + type: Number, + value: -1, }, /** 搜索框形状 */ shape: { @@ -77,22 +121,13 @@ const props: TdSearchProps = { type: String, value: '', }, - /** 搜索框内部右侧内容,位于 `suffixIcon` 右侧 */ - suffix: { - type: String, - value: '', - }, - /** 后置图标 */ - suffixIcon: { + /** 拉起键盘的类型 */ + type: { type: String, + value: 'text', }, - /** 值,搜索关键词 */ + /** 值 */ value: { - type: String, - value: null, - }, - /** 值,搜索关键词,非受控属性 */ - defaultValue: { type: String, value: '', }, diff --git a/packages/products/tdesign-miniprogram/src/search/type.ts b/packages/products/tdesign-miniprogram/src/search/type.ts index 6665e1f5..574c2497 100644 --- a/packages/products/tdesign-miniprogram/src/search/type.ts +++ b/packages/products/tdesign-miniprogram/src/search/type.ts @@ -6,7 +6,7 @@ export interface TdSearchProps { /** - * 用于自定义搜索框右侧内容,如:“取消” + * 自定义右侧操作按钮文字 * @default '' */ action?: { @@ -14,17 +14,18 @@ export interface TdSearchProps { value?: string; }; /** - * 【开发中】联想词列表,如果不存在或长度为 0 则不显示联想框。可以使用函数 `label` 自定义联想词为任意内容;也可使用插槽 `option` 定义联想词内容,插槽参数为 `{ option: AutocompleteOption; index: number }`。如果 `group` 值为 `true` 则表示当前项为分组标题 + * 键盘弹起时,是否自动上推页面 + * @default true */ - autocompleteOptions?: { - type: ArrayConstructor; - value?: Array; + adjustPosition?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 是否默认聚焦 + * 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) * @default false */ - autofocus?: { + alwaysEmbed?: { type: BooleanConstructor; value?: boolean; }; @@ -37,7 +38,7 @@ export interface TdSearchProps { value?: boolean; }; /** - * 是否可清空 + * 是否启用清除控件 * @default true */ clearable?: { @@ -45,28 +46,46 @@ export interface TdSearchProps { value?: boolean; }; /** - * 禁用状态 + * 点击键盘右下角按钮时是否保持键盘不收起 + * @default false */ - disabled?: { + confirmHold?: { type: BooleanConstructor; value?: boolean; }; /** - * 组件外部样式类名,分别用于设置组件外层类名、输入框类名、输入框容器类名、右侧 cancel 文本类名、左侧图标类名、右侧图标类型 + * 设置键盘右下角按钮的文字,仅在type='text'时生效。
具体释义:
`send` 右下角按钮为“发送”;
`search` 右下角按钮为“搜索”;
`next` 右下角按钮为“下一个”;
`go` 右下角按钮为“前往”;
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) + * @default search */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-input', 't-class-input-container', 't-class-cancel', 't-class-left', 't-class-right']; + confirmType?: { + type: StringConstructor; + value?: 'send' | 'search' | 'next' | 'go' | 'done'; }; /** - * 自定义过滤方法,用于对现有数据进行搜索过滤,判断是否过滤某一项数据。其中参数 `keyword` 指当前的搜索词,参数 `option` 指每一项联想词,函数返回 true 则显示当前联想词,函数返回 `false` 则隐藏当前联想词 + * 指定 focus 时的光标位置 */ - filter?: { - type: undefined; - value?: (keyword: string, option: any) => boolean | Promise; + cursor: { + type: NumberConstructor; + value?: number; + }; + /** + * 搜索框聚焦时底部与键盘的距离 + * @default 0 + */ + cursorSpacing?: { + type: NumberConstructor; + value?: number; + }; + /** + * 是否禁用 + * @default false + */ + disabled?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 是否聚焦,同小程序官方属性 + * 是否聚焦 * @default false */ focus?: { @@ -74,13 +93,36 @@ export interface TdSearchProps { value?: boolean; }; /** - * 搜索框内部左侧内容,位于 `prefixIcon` 左侧 - * @default '' + * focus时,点击页面的时候不收起键盘 + * @default false + */ + holdKeyboard?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 左侧图标 + * @default 'search' */ - label?: { + leftIcon?: { type: StringConstructor; value?: string; }; + /** + * 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 + */ + maxcharacter?: { + type: NumberConstructor; + value?: number; + }; + /** + * 用户最多可以输入的文本长度,一个中文等于一个计数长度。默认为 -1,不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 + * @default -1 + */ + maxlength?: { + type: NumberConstructor; + value?: number; + }; /** * 占位符 * @default '' @@ -90,20 +132,44 @@ export interface TdSearchProps { value?: string; }; /** - * 前置图标,默认为搜索图标。值为 `null` 时则不显示 - * @default 'search' + * 指定 placeholder 的样式类 + * @default input-placeholder */ - prefixIcon?: { + placeholderClass?: { type: StringConstructor; value?: string; }; /** - * 只读状态 - * @default false + * 指定 placeholder 的样式 + * @default '' */ - readonly?: { - type: BooleanConstructor; - value?: boolean; + placeholderStyle: { + type: StringConstructor; + value?: string; + }; + /** + * 预览结果列表 + * @default [] + */ + resultList?: { + type: ArrayConstructor; + value?: Array; + }; + /** + * 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 + * @default -1 + */ + selectionEnd?: { + type: NumberConstructor; + value?: number; + }; + /** + * 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 + * @default -1 + */ + selectionStart?: { + type: NumberConstructor; + value?: number; }; /** * 搜索框形状 @@ -122,36 +188,19 @@ export interface TdSearchProps { value?: string; }; /** - * 搜索框内部右侧内容,位于 `suffixIcon` 右侧 - * @default '' - */ - suffix?: { - type: StringConstructor; - value?: string; - }; - /** - * 后置图标 + * 拉起键盘的类型 + * @default 'text' */ - suffixIcon?: { + type?: { type: StringConstructor; - value?: string; + value?: 'text' | 'number' | 'idcard' | 'digit' | 'nickname'; }; /** - * 值,搜索关键词 + * 值 * @default '' */ value?: { type: StringConstructor; value?: string; }; - /** - * 值,搜索关键词,非受控属性 - * @default '' - */ - defaultValue?: { - type: StringConstructor; - value?: string; - }; } - -export type AutocompleteOption = string | { label: string; group?: boolean };