-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Mobile): search add props
maxcharacter 、maxlength and `resul…
…tList` (#489) * feat(Vue(Mobile)): add props `maxcharacter` and `maxlength` * feat(Vue(Mobile)): add props `allowInputOverMax` * feat(search): add api `result-list` * chore: `maxcharacter` 和 `resultList` 使用已有定义 * chore: 添加类型定义和文档 --------- Co-authored-by: 黎伟杰 <674416404@qq.com>
- Loading branch information
1 parent
b42ed82
commit 20de3e9
Showing
6 changed files
with
274 additions
and
5 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| /* eslint-disable */ | ||
|
|
||
| /** | ||
| * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC | ||
| * */ | ||
|
|
||
| import { TdSearchProps } from './type'; | ||
| import { PropType } from 'vue'; | ||
|
|
||
| export default { | ||
| /** 自定义右侧操作按钮文字，如：“取消” */ | ||
| action: { | ||
| type: [String, Function] as PropType<TdSearchProps['action']>, | ||
| default: '', | ||
| }, | ||
| /** 【讨论中】联想词列表，如果不存在或长度为 0 则不显示联想框。可以使用函数 `label` 自定义联想词为任意内容；也可使用插槽 `option` 定义联想词内容，插槽参数为 `{ option: AutocompleteOption; index: number }`。如果 `group` 值为 `true` 则表示当前项为分组标题 */ | ||
| autocompleteOptions: { | ||
| type: Array as PropType<TdSearchProps['autocompleteOptions']>, | ||
| }, | ||
| /** 是否居中 */ | ||
| center: Boolean, | ||
| /** 是否可清空 */ | ||
| clearable: { | ||
| type: Boolean, | ||
| default: true, | ||
| }, | ||
| /** 禁用状态 */ | ||
| disabled: Boolean, | ||
| /** 是否聚焦 */ | ||
| focus: Boolean, | ||
| /** 左侧图标 */ | ||
| leftIcon: { | ||
| type: [String, Function] as PropType<TdSearchProps['leftIcon']>, | ||
| default: 'search', | ||
| }, | ||
| /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */ | ||
| maxcharacter: { | ||
| type: Number, | ||
| }, | ||
| /** 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为空，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */ | ||
| maxlength: { | ||
| type: [String, Number] as PropType<TdSearchProps['maxlength']>, | ||
| }, | ||
| /** 占位符 */ | ||
| placeholder: { | ||
| type: String, | ||
| default: '', | ||
| }, | ||
| /** 只读状态 */ | ||
| readonly: { | ||
| type: Boolean, | ||
| default: undefined, | ||
| }, | ||
| /** 预览结果列表 */ | ||
| resultList: { | ||
| type: Array as PropType<TdSearchProps['resultList']>, | ||
| default: (): TdSearchProps['resultList'] => [], | ||
| }, | ||
| /** 搜索框形状 */ | ||
| shape: { | ||
| type: String as PropType<TdSearchProps['shape']>, | ||
| default: 'square' as TdSearchProps['shape'], | ||
| validator(val: TdSearchProps['shape']): boolean { | ||
| if (!val) return true; | ||
| return ['square', 'round'].includes(val); | ||
| }, | ||
| }, | ||
| /** 值，搜索关键词 */ | ||
| value: { | ||
| type: String, | ||
| default: undefined, | ||
| }, | ||
| modelValue: { | ||
| type: String, | ||
| default: undefined, | ||
| }, | ||
| /** 值，搜索关键词，非受控属性 */ | ||
| defaultValue: { | ||
| type: String, | ||
| default: '', | ||
| }, | ||
| /** 点击搜索框右侧操作内容时触发 */ | ||
| onActionClick: Function as PropType<TdSearchProps['onActionClick']>, | ||
| /** 失去焦点时触发 */ | ||
| onBlur: Function as PropType<TdSearchProps['onBlur']>, | ||
| /** 搜索关键词发生变化时触发，可能场景有：搜索框内容发生变化、点击联想词 */ | ||
| onChange: Function as PropType<TdSearchProps['onChange']>, | ||
| /** 点击清除时触发 */ | ||
| onClear: Function as PropType<TdSearchProps['onClear']>, | ||
| /** 获得焦点时触发 */ | ||
| onFocus: Function as PropType<TdSearchProps['onFocus']>, | ||
| /** 【讨论中】搜索触发，包含：手机键盘提交健、联想关键词点击、清空按钮点击等 */ | ||
| onSearch: Function as PropType<TdSearchProps['onSearch']>, | ||
| /** 提交时触发，如：手机键盘提交按钮点击 */ | ||
| onSubmit: Function as PropType<TdSearchProps['onSubmit']>, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
packages/products/tdesign-mobile-vue/src/search/type.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| /* eslint-disable */ | ||
|
|
||
| /** | ||
| * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC | ||
| * */ | ||
|
|
||
| import { TNode } from '../common'; | ||
|
|
||
| export interface TdSearchProps { | ||
| /** | ||
| * 自定义右侧操作按钮文字，如：“取消” | ||
| * @default '' | ||
| */ | ||
| action?: string | TNode; | ||
| /** | ||
| * 【讨论中】联想词列表，如果不存在或长度为 0 则不显示联想框。可以使用函数 `label` 自定义联想词为任意内容；也可使用插槽 `option` 定义联想词内容，插槽参数为 `{ option: AutocompleteOption; index: number }`。如果 `group` 值为 `true` 则表示当前项为分组标题 | ||
| */ | ||
| autocompleteOptions?: Array<AutocompleteOption>; | ||
| /** | ||
| * 是否居中 | ||
| * @default false | ||
| */ | ||
| center?: boolean; | ||
| /** | ||
| * 是否可清空 | ||
| * @default true | ||
| */ | ||
| clearable?: boolean; | ||
| /** | ||
| * 禁用状态 | ||
| */ | ||
| disabled?: boolean; | ||
| /** | ||
| * 是否聚焦 | ||
| * @default false | ||
| */ | ||
| focus?: boolean; | ||
| /** | ||
| * 左侧图标 | ||
| * @default 'search' | ||
| */ | ||
| leftIcon?: string | TNode; | ||
| /** | ||
| * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | ||
| */ | ||
| maxcharacter?: number; | ||
| /** | ||
| * 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为空，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | ||
| */ | ||
| maxlength?: string | number; | ||
| /** | ||
| * 占位符 | ||
| * @default '' | ||
| */ | ||
| placeholder?: string; | ||
| /** | ||
| * 只读状态 | ||
| */ | ||
| readonly?: boolean; | ||
| /** | ||
| * 预览结果列表 | ||
| * @default [] | ||
| */ | ||
| resultList?: Array<string>; | ||
| /** | ||
| * 搜索框形状 | ||
| * @default 'square' | ||
| */ | ||
| shape?: 'square' | 'round'; | ||
| /** | ||
| * 值，搜索关键词 | ||
| * @default '' | ||
| */ | ||
| value?: string; | ||
| /** | ||
| * 值，搜索关键词，非受控属性 | ||
| * @default '' | ||
| */ | ||
| defaultValue?: string; | ||
| /** | ||
| * 值，搜索关键词 | ||
| * @default '' | ||
| */ | ||
| modelValue?: string; | ||
| /** | ||
| * 点击搜索框右侧操作内容时触发 | ||
| * @default '' | ||
| */ | ||
| onActionClick?: (context: { e: MouseEvent }) => void; | ||
| /** | ||
| * 失去焦点时触发 | ||
| * @default '' | ||
| */ | ||
| onBlur?: (context: { value: string; e: FocusEvent }) => void; | ||
| /** | ||
| * 搜索关键词发生变化时触发，可能场景有：搜索框内容发生变化、点击联想词 | ||
| * @default '' | ||
| */ | ||
| onChange?: (value: string, context: { e?: InputEvent | MouseEvent }) => void; | ||
| /** | ||
| * 点击清除时触发 | ||
| * @default '' | ||
| */ | ||
| onClear?: (context: { e: MouseEvent }) => void; | ||
| /** | ||
| * 获得焦点时触发 | ||
| * @default '' | ||
| */ | ||
| onFocus?: (context: { value: string; e: FocusEvent }) => void; | ||
| /** | ||
| * 【讨论中】搜索触发，包含：手机键盘提交健、联想关键词点击、清空按钮点击等 | ||
| * @default '' | ||
| */ | ||
| onSearch?: (context?: { | ||
| value: string; | ||
| trigger: 'submit' | 'option-click' | 'clear'; | ||
| e?: InputEvent | MouseEvent; | ||
| }) => void; | ||
| /** | ||
| * 提交时触发，如：手机键盘提交按钮点击 | ||
| * @default '' | ||
| */ | ||
| onSubmit?: (context: { value: string; e: KeyboardEvent }) => void; | ||
| } | ||
|
|
||
| export type AutocompleteOption = string | { label: string | TNode; group?: boolean }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters