first commit
This commit is contained in:
lingxiao865
88
uni_modules/tdesign-uniapp/components/search/README.en-US.md
Normal file
88
uni_modules/tdesign-uniapp/components/search/README.en-US.md
Normal file
@@ -0,0 +1,88 @@
|
||||
|
||||
## API
|
||||
|
||||
### Search Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
action | String | '' | \- | N
|
||||
adjust-position | Boolean | true | \- | N
|
||||
always-embed | Boolean | false | \- | N
|
||||
center | Boolean | false | \- | N
|
||||
clear-trigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
|
||||
clearable | Boolean | true | \- | N
|
||||
confirm-hold | Boolean | false | \- | N
|
||||
confirm-type | String | search | options: send/search/next/go/done | N
|
||||
cursor | Number | -1 | \- | N
|
||||
cursor-color | String | #0052d9 | \- | N
|
||||
cursor-spacing | Number | 0 | \- | N
|
||||
disabled | Boolean | false | \- | N
|
||||
focus | Boolean | false | \- | N
|
||||
hold-keyboard | Boolean | false | \- | N
|
||||
label | String | '' | `deprecated` | N
|
||||
left-icon | String | 'search' | \- | N
|
||||
maxcharacter | Number | - | The maximum number of characters that the user can enter. One Chinese character represents two characters in length. Use either `maxcharacter` or `maxlength` | N
|
||||
maxlength | Number | -1 | \- | N
|
||||
placeholder | String | '' | \- | N
|
||||
placeholder-class | String | input-placeholder | \- | N
|
||||
placeholder-style | String | - | \- | N
|
||||
readonly | Boolean | undefined | \- | N
|
||||
result-list | Array | [] | Typescript: `Array<string>` | N
|
||||
right-icon | String | 'close-circle-filled' | `deprecated` | N
|
||||
selection-end | Number | -1 | \- | N
|
||||
selection-start | Number | -1 | \- | N
|
||||
shape | String | 'square' | options: square/round | N
|
||||
type | String | 'text' | options: text/number/idcard/digit/nickname | N
|
||||
value | String | '' | \- | N
|
||||
|
||||
### Search Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
action-click | \- | \-
|
||||
blur | `(context: { value: string })` | \-
|
||||
change | `(context: { value: string })` | \-
|
||||
clear | `(context: { value: string })` | \-
|
||||
focus | `(context: { value: string })` | \-
|
||||
submit | `(context: { value: string })` | \-
|
||||
|
||||
### Search Slots
|
||||
|
||||
name | Description
|
||||
-- | --
|
||||
action | \-
|
||||
left-icon | \-
|
||||
right-icon | `deprecated`
|
||||
|
||||
### Search External Classes
|
||||
|
||||
className | Description
|
||||
-- | --
|
||||
t-class | \-
|
||||
t-class-action | \-
|
||||
t-class-clear | \-
|
||||
t-class-input | \-
|
||||
t-class-input-container | \-
|
||||
t-class-left | \-
|
||||
|
||||
### CSS Variables
|
||||
|
||||
The component provides the following CSS variables, which can be used to customize styles.
|
||||
Name | Default Value | Description
|
||||
-- | -- | --
|
||||
--td-search-action-color | @brand-color | -
|
||||
--td-search-bg-color | @bg-color-secondarycontainer | -
|
||||
--td-search-clear-icon-color | @text-color-placeholder | -
|
||||
--td-search-clear-icon-size | 48rpx | -
|
||||
--td-search-disabled-text-color | @text-color-disabled | -
|
||||
--td-search-font | @font-body-large | -
|
||||
--td-search-height | 80rpx | -
|
||||
--td-search-icon-color | @text-color-placeholder | -
|
||||
--td-search-icon-size | 48rpx | -
|
||||
--td-search-label-color | @text-color-primary | -
|
||||
--td-search-padding | 16rpx 24rpx | -
|
||||
--td-search-placeholder-color | @text-color-placeholder | -
|
||||
--td-search-result-high-light-color | @brand-color | -
|
||||
--td-search-square-radius | @radius-default | -
|
||||
--td-search-text-color | @text-color-primary | -
|
||||
126
uni_modules/tdesign-uniapp/components/search/README.md
Normal file
126
uni_modules/tdesign-uniapp/components/search/README.md
Normal file
@@ -0,0 +1,126 @@
|
||||
---
|
||||
title: Search 搜索框
|
||||
description: 用于用户输入搜索信息，并进行页面内容搜索。
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 引入
|
||||
|
||||
可在 `main.ts` 或在需要使用的页面或组件中引入。
|
||||
|
||||
```js
|
||||
import TSearch from '@tdesign/uniapp/search/search.vue';
|
||||
```
|
||||
|
||||
### 01 组件类型
|
||||
|
||||
基础搜索框
|
||||
|
||||
{{ base }}
|
||||
|
||||
获取焦点后显示取消按钮
|
||||
|
||||
{{ action }}
|
||||
|
||||
### 02 组件样式
|
||||
|
||||
搜索框形状
|
||||
|
||||
{{ shape }}
|
||||
|
||||
### 03 组件状态
|
||||
|
||||
默认状态其他对齐方式
|
||||
|
||||
{{ other }}
|
||||
|
||||
## API
|
||||
|
||||
### Search Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | Object | - | 自定义样式 | N
|
||||
action | String | '' | 自定义右侧操作按钮文字 | N
|
||||
adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
|
||||
always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
|
||||
center | Boolean | false | 是否居中 | N
|
||||
clear-trigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
|
||||
clearable | Boolean | true | 是否启用清除控件 | N
|
||||
confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N
|
||||
confirm-type | String | search | 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N
|
||||
cursor | Number | -1 | 指定 focus 时的光标位置 | N
|
||||
cursor-color | String | #0052d9 | 光标颜色。iOS 下的格式为十六进制颜色值 #000000，安卓下的只支持 default 和 green，Skyline 下无限制 | N
|
||||
cursor-spacing | Number | 0 | 搜索框聚焦时底部与键盘的距离 | N
|
||||
disabled | Boolean | false | 是否禁用 | N
|
||||
focus | Boolean | false | 是否聚焦 | N
|
||||
hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
|
||||
label | String | '' | 已废弃。左侧文本 | N
|
||||
left-icon | String | 'search' | 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值 | N
|
||||
maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
|
||||
maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
|
||||
placeholder | String | '' | 占位符 | N
|
||||
placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
|
||||
placeholder-style | String | - | 指定 placeholder 的样式 | N
|
||||
readonly | Boolean | undefined | 只读状态 | N
|
||||
result-list | Array | [] | 预览结果列表。TS 类型：`Array<string>` | N
|
||||
right-icon | String | 'close-circle-filled' | 已废弃。右侧图标 | N
|
||||
selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
|
||||
selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
|
||||
shape | String | 'square' | 搜索框形状。可选项：square/round | N
|
||||
type | String | 'text' | 拉起键盘的类型。可选项：text/number/idcard/digit/nickname | N
|
||||
value | String | '' | 值 | N
|
||||
|
||||
### Search Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
action-click | \- | 点击右侧操作按钮文字时触发
|
||||
blur | `(context: { value: string })` | 失去焦点时触发
|
||||
change | `(context: { value: string })` | 值发生变化时触发
|
||||
clear | `(context: { value: string })` | 点击清除时触发
|
||||
focus | `(context: { value: string })` | 聚焦时触发
|
||||
submit | `(context: { value: string })` | 提交时触发
|
||||
|
||||
### Search Slots
|
||||
|
||||
名称 | 描述
|
||||
-- | --
|
||||
action | 自定义 `action` 显示内容
|
||||
left-icon | 左侧图标
|
||||
right-icon | 已废弃。自定义 `right-icon` 显示内容
|
||||
|
||||
### Search External Classes
|
||||
|
||||
类名 | 描述
|
||||
-- | --
|
||||
t-class | 根节点样式类
|
||||
t-class-action | 操作按钮样式类
|
||||
t-class-clear | 右侧图标样式类
|
||||
t-class-input | 输入框样式类
|
||||
t-class-input-container | 输入框容器样式类
|
||||
t-class-left | 左侧图标样式类
|
||||
|
||||
### CSS Variables
|
||||
|
||||
组件提供了下列 CSS 变量，可用于自定义样式。
|
||||
名称 | 默认值 | 描述
|
||||
-- | -- | --
|
||||
--td-search-action-color | @brand-color | -
|
||||
--td-search-bg-color | @bg-color-secondarycontainer | -
|
||||
--td-search-clear-icon-color | @text-color-placeholder | -
|
||||
--td-search-clear-icon-size | 48rpx | -
|
||||
--td-search-disabled-text-color | @text-color-disabled | -
|
||||
--td-search-font | @font-body-large | -
|
||||
--td-search-height | 80rpx | -
|
||||
--td-search-icon-color | @text-color-placeholder | -
|
||||
--td-search-icon-size | 48rpx | -
|
||||
--td-search-label-color | @text-color-primary | -
|
||||
--td-search-padding | 16rpx 24rpx | -
|
||||
--td-search-placeholder-color | @text-color-placeholder | -
|
||||
--td-search-result-high-light-color | @brand-color | -
|
||||
--td-search-square-radius | @radius-default | -
|
||||
--td-search-text-color | @text-color-primary | -
|
||||
3
uni_modules/tdesign-uniapp/components/search/computed.js
Normal file
3
uni_modules/tdesign-uniapp/components/search/computed.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export const highLight = function (label, keyword) {
|
||||
return label.replace(keyword, `<span class="t-search__result-item--highLight">${keyword}</span>`);
|
||||
};
|
||||
171
uni_modules/tdesign-uniapp/components/search/props.ts
Normal file
171
uni_modules/tdesign-uniapp/components/search/props.ts
Normal file
@@ -0,0 +1,171 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdSearchProps } from './type';
|
||||
export default {
|
||||
/** 自定义右侧操作按钮文字 */
|
||||
action: {
|
||||
type: String,
|
||||
default: '' as TdSearchProps['action'],
|
||||
},
|
||||
/** 键盘弹起时，是否自动上推页面 */
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/** 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) */
|
||||
alwaysEmbed: Boolean,
|
||||
/** 是否居中 */
|
||||
center: Boolean,
|
||||
/** 清空图标触发方式，仅在输入框有值时有效 */
|
||||
clearTrigger: {
|
||||
type: String,
|
||||
default: 'always' as TdSearchProps['clearTrigger'],
|
||||
validator(val: TdSearchProps['clearTrigger']): boolean {
|
||||
if (!val) return true;
|
||||
return ['always', 'focus'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 是否启用清除控件 */
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/** 点击键盘右下角按钮时是否保持键盘不收起 */
|
||||
confirmHold: Boolean,
|
||||
/** 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) */
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: 'search' as TdSearchProps['confirmType'],
|
||||
validator(val: TdSearchProps['confirmType']): boolean {
|
||||
if (!val) return true;
|
||||
return ['send', 'search', 'next', 'go', 'done'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 指定 focus 时的光标位置 */
|
||||
cursor: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
/** 光标颜色。iOS 下的格式为十六进制颜色值 #000000，安卓下的只支持 default 和 green，Skyline 下无限制 */
|
||||
cursorColor: {
|
||||
type: String,
|
||||
default: '#0052d9',
|
||||
},
|
||||
/** 搜索框聚焦时底部与键盘的距离 */
|
||||
cursorSpacing: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
/** 是否禁用 */
|
||||
disabled: Boolean,
|
||||
/** 是否聚焦 */
|
||||
focus: Boolean,
|
||||
/** focus时，点击页面的时候不收起键盘 */
|
||||
holdKeyboard: Boolean,
|
||||
/** 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值 */
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: 'search' as TdSearchProps['leftIcon'],
|
||||
},
|
||||
/** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */
|
||||
maxcharacter: {
|
||||
type: Number,
|
||||
},
|
||||
/** 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
/** 占位符 */
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 指定 placeholder 的样式类 */
|
||||
placeholderClass: {
|
||||
type: String,
|
||||
default: 'input-placeholder',
|
||||
},
|
||||
/** 指定 placeholder 的样式 */
|
||||
placeholderStyle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 只读状态 */
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
/** 预览结果列表 */
|
||||
resultList: {
|
||||
type: Array,
|
||||
default: (): TdSearchProps['resultList'] => [],
|
||||
},
|
||||
/** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */
|
||||
selectionEnd: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
/** 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 */
|
||||
selectionStart: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
/** 搜索框形状 */
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'square' as TdSearchProps['shape'],
|
||||
validator(val: TdSearchProps['shape']): boolean {
|
||||
if (!val) return true;
|
||||
return ['square', 'round'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 拉起键盘的类型 */
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text' as TdSearchProps['type'],
|
||||
validator(val: TdSearchProps['type']): boolean {
|
||||
if (!val) return true;
|
||||
return ['text', 'number', 'idcard', 'digit', 'nickname'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 值 */
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 点击右侧操作按钮文字时触发 */
|
||||
onActionClick: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 失去焦点时触发 */
|
||||
onBlur: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 值发生变化时触发 */
|
||||
onChange: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 点击清除时触发 */
|
||||
onClear: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 聚焦时触发 */
|
||||
onFocus: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 提交时触发 */
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
};
|
||||
75
uni_modules/tdesign-uniapp/components/search/search.css
Normal file
75
uni_modules/tdesign-uniapp/components/search/search.css
Normal file
@@ -0,0 +1,75 @@
|
||||
.t-search {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.t-search__label {
|
||||
padding: 8rpx;
|
||||
color: var(--td-search-label-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
}
|
||||
.t-search__input-box {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
height: var(--td-search-height, 80rpx);
|
||||
align-items: center;
|
||||
border: 2rpx solid var(--td-search-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
|
||||
background: var(--td-search-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
|
||||
padding: var(--td-search-padding, 16rpx 24rpx);
|
||||
}
|
||||
.t-search__input-box.t-is-focused {
|
||||
border-color: var(--td-search-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
|
||||
}
|
||||
.t-search__input-box--round {
|
||||
border-radius: calc(var(--td-search-height, 80rpx) / 2);
|
||||
}
|
||||
.t-search__input-box--square {
|
||||
border-radius: var(--td-search-square-radius, var(--td-radius-default, 12rpx));
|
||||
}
|
||||
.t-search__input-box--center {
|
||||
text-align: center;
|
||||
}
|
||||
.t-search__input-box .t-input__keyword {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
color: var(--td-search-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
font: var(--td-search-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
padding-left: 10rpx;
|
||||
min-height: 48rpx;
|
||||
}
|
||||
.t-search__input-box .t-input--disabled {
|
||||
color: var(--td-search-disabled-text-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: currentColor;
|
||||
}
|
||||
.t-search__input-box .t-icon {
|
||||
color: var(--td-search-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
font-size: var(--td-search-icon-size, 48rpx);
|
||||
}
|
||||
.t-search__clear {
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
font-size: var(--td-search-clear-icon-size, 48rpx);
|
||||
color: var(--td-search-clear-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
}
|
||||
.t-search__search-action {
|
||||
margin-left: 30rpx;
|
||||
font: var(--td-search-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
color: var(--td-search-action-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-search__placeholder {
|
||||
color: var(--td-search-placeholder-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
}
|
||||
.t-search__placeholder--center {
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.t-search__result-item--highLight) {
|
||||
color: var(--td-search-result-high-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-search__result-list :deep(.t-search__result-item) {
|
||||
padding-left: 0;
|
||||
}
|
||||
.t-search__result-list :deep(.t-search__result-item)::after {
|
||||
left: 0;
|
||||
}
|
||||
285
uni_modules/tdesign-uniapp/components/search/search.vue
Normal file
285
uni_modules/tdesign-uniapp/components/search/search.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<view>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="classPrefix + ' ' + tClass"
|
||||
>
|
||||
<view
|
||||
:class="
|
||||
classPrefix +'__input-box ' +
|
||||
prefix + '-' +(focus ? 'is-focused' : 'not-focused') +
|
||||
' ' + classPrefix + '__input-box--' + (center ? 'center' : '') +
|
||||
' ' + classPrefix + '__input-box--' + shape +
|
||||
' ' + tClassInputContainer
|
||||
"
|
||||
>
|
||||
<t-icon
|
||||
v-if="leftIcon"
|
||||
:name="leftIcon"
|
||||
:t-class="prefix + '-icon ' + tClassLeft"
|
||||
:aria-hidden="true"
|
||||
/>
|
||||
<slot
|
||||
v-else
|
||||
name="left-icon"
|
||||
/>
|
||||
<input
|
||||
:type="type"
|
||||
name="input"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled || readonly"
|
||||
:class="prefix + '-input__keyword ' + tClassInput + ' ' + (disabled ? prefix + '-input--disabled' : '')"
|
||||
:focus="focus"
|
||||
:value="dataValue"
|
||||
:confirm-type="confirmType"
|
||||
:confirm-hold="confirmHold"
|
||||
:cursor="cursor"
|
||||
:adjust-position="adjustPosition"
|
||||
:always-embed="alwaysEmbed"
|
||||
:selection-start="selectionStart"
|
||||
:selection-end="selectionEnd"
|
||||
:hold-keyboard="holdKeyboard"
|
||||
:cursor-spacing="cursorSpacing"
|
||||
:cursor-color="cursorColor"
|
||||
:placeholder="placeholder"
|
||||
:placeholder-style="placeholderStyle"
|
||||
:placeholder-class="placeholderClass + ' ' + classPrefix + '__placeholder ' + classPrefix + '__placeholder--' + (center ? 'center' : 'normal')"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@confirm="onConfirm"
|
||||
>
|
||||
<view
|
||||
v-if="dataValue !== '' && clearable && showClearIcon"
|
||||
:class="classPrefix + '__clear hotspot-expanded ' + tClassClear"
|
||||
aria-role="button"
|
||||
aria-label="清除"
|
||||
@touchstart.stop.prevent="handleClear"
|
||||
>
|
||||
<t-icon
|
||||
name="close-circle-filled"
|
||||
size="inherit"
|
||||
color="inherit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="action"
|
||||
:class="classPrefix + '__search-action ' + tClassAction"
|
||||
aria-role="button"
|
||||
@click.stop.prevent="onActionClick"
|
||||
>
|
||||
{{ action }}
|
||||
</view>
|
||||
<slot
|
||||
v-else
|
||||
name="action"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
v-if="isShowResultList && !isSelected"
|
||||
:class="classPrefix + '__result-list'"
|
||||
aria-role="listbox"
|
||||
>
|
||||
<t-cell
|
||||
v-for="(item, index) in resultList"
|
||||
:key="index"
|
||||
:data-index="index"
|
||||
:t-class="classPrefix + '__result-item'"
|
||||
hover
|
||||
aria-role="option"
|
||||
@click="onSelectResultItem($event, { index })"
|
||||
>
|
||||
<template
|
||||
#title
|
||||
>
|
||||
<rich-text
|
||||
:nodes="highLight(item, dataValue)"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TIcon from '../icon/icon';
|
||||
import TCell from '../cell/cell';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import { getCharacterLength, nextTick } from '../common/utils';
|
||||
import tools from '../common/utils.wxs';
|
||||
import { highLight } from './computed.js';
|
||||
// import { getInnerMaxLen } from '../input/utils';
|
||||
|
||||
const name = `${prefix}-search`;
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-input-container`,
|
||||
`${prefix}-class-input`,
|
||||
`${prefix}-class-action`,
|
||||
`${prefix}-class-left`,
|
||||
`${prefix}-class-clear`,
|
||||
],
|
||||
components: {
|
||||
TIcon,
|
||||
TCell,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
emits: [
|
||||
'selectresult',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
classPrefix: name,
|
||||
prefix,
|
||||
isShowResultList: false,
|
||||
isSelected: false,
|
||||
showClearIcon: false,
|
||||
tools,
|
||||
|
||||
dataValue: this.value,
|
||||
// innerMaxLen: -1,
|
||||
// rawValue: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
resultList: {
|
||||
handler(val) {
|
||||
const { isSelected } = this;
|
||||
if (val.length) {
|
||||
if (isSelected) {
|
||||
// 已选择
|
||||
this.isShowResultList = false;
|
||||
this.isSelected = false;
|
||||
} else {
|
||||
this.isShowResultList = true;
|
||||
}
|
||||
} else {
|
||||
this.isShowResultList = false;
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
dataValue: {
|
||||
handler() {
|
||||
// this.updateInnerMaxLen();
|
||||
this.updateClearIconVisible();
|
||||
},
|
||||
},
|
||||
clearTrigger: 'updateClearIconVisible',
|
||||
clearable: 'updateClearIconVisible',
|
||||
disabled: 'updateClearIconVisible',
|
||||
readonly: 'updateClearIconVisible',
|
||||
|
||||
// maxcharacter: 'updateInnerMaxLen',
|
||||
// maxlength: 'updateInnerMaxLen',
|
||||
},
|
||||
mounted() {
|
||||
this.updateClearIconVisible();
|
||||
},
|
||||
methods: {
|
||||
updateClearIconVisible(value = false) {
|
||||
const { clearTrigger, disabled, readonly, dataValue } = this;
|
||||
if (disabled || readonly || !dataValue) {
|
||||
this.showClearIcon = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.showClearIcon = value || String(clearTrigger) === 'always';
|
||||
},
|
||||
|
||||
onInput(e) {
|
||||
let { value } = e.detail;
|
||||
// this.rawValue = value;
|
||||
this.dataValue = value;
|
||||
|
||||
const { maxcharacter } = this;
|
||||
if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
|
||||
const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
|
||||
|
||||
value = characters;
|
||||
}
|
||||
|
||||
|
||||
nextTick().then(() => {
|
||||
this.dataValue = value;
|
||||
this.$emit('change', { value });
|
||||
});
|
||||
// this.updateInnerMaxLen();
|
||||
},
|
||||
|
||||
onFocus(e) {
|
||||
const { value } = e.detail;
|
||||
this.updateClearIconVisible(true);
|
||||
this.$emit('focus', { value });
|
||||
},
|
||||
|
||||
onBlur(e) {
|
||||
const { value } = e.detail;
|
||||
this.updateClearIconVisible();
|
||||
this.$emit('blur', { value });
|
||||
},
|
||||
|
||||
handleClear() {
|
||||
this.dataValue = '';
|
||||
this.$emit('clear', { value: '' });
|
||||
this.$emit('change', { value: '' });
|
||||
},
|
||||
|
||||
onConfirm(e) {
|
||||
const { value } = e.detail;
|
||||
this.$emit('submit', { value });
|
||||
},
|
||||
|
||||
onActionClick() {
|
||||
this.$emit('action-click');
|
||||
},
|
||||
|
||||
onSelectResultItem(tools, { index }) {
|
||||
const item = this.resultList[index];
|
||||
this.dataValue = item;
|
||||
this.isSelected = true;
|
||||
|
||||
this.$emit('change', { value: item });
|
||||
this.$emit('selectresult', { index, item });
|
||||
},
|
||||
highLight,
|
||||
// updateInnerMaxLen() {
|
||||
// // this.innerMaxLen = this.getInnerMaxLen();
|
||||
// },
|
||||
// getInnerMaxLen() {
|
||||
// const {
|
||||
// maxcharacter,
|
||||
// maxlength,
|
||||
// dataValue,
|
||||
// rawValue,
|
||||
// count,
|
||||
// } = this;
|
||||
// return getInnerMaxLen({
|
||||
// allowInputOverMax: false,
|
||||
// maxcharacter,
|
||||
// maxlength,
|
||||
// dataValue,
|
||||
// rawValue,
|
||||
// count,
|
||||
// });
|
||||
// },
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './search.css';
|
||||
</style>
|
||||
165
uni_modules/tdesign-uniapp/components/search/type.ts
Normal file
165
uni_modules/tdesign-uniapp/components/search/type.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
export interface TdSearchProps {
|
||||
/**
|
||||
* 自定义右侧操作按钮文字
|
||||
* @default ''
|
||||
*/
|
||||
action?: string;
|
||||
/**
|
||||
* 键盘弹起时，是否自动上推页面
|
||||
* @default true
|
||||
*/
|
||||
adjustPosition?: boolean;
|
||||
/**
|
||||
* 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
|
||||
* @default false
|
||||
*/
|
||||
alwaysEmbed?: boolean;
|
||||
/**
|
||||
* 是否居中
|
||||
* @default false
|
||||
*/
|
||||
center?: boolean;
|
||||
/**
|
||||
* 清空图标触发方式，仅在输入框有值时有效
|
||||
* @default always
|
||||
*/
|
||||
clearTrigger?: 'always' | 'focus';
|
||||
/**
|
||||
* 是否启用清除控件
|
||||
* @default true
|
||||
*/
|
||||
clearable?: boolean;
|
||||
/**
|
||||
* 点击键盘右下角按钮时是否保持键盘不收起
|
||||
* @default false
|
||||
*/
|
||||
confirmHold?: boolean;
|
||||
/**
|
||||
* 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)
|
||||
* @default search
|
||||
*/
|
||||
confirmType?: 'send' | 'search' | 'next' | 'go' | 'done';
|
||||
/**
|
||||
* 指定 focus 时的光标位置
|
||||
* @default -1
|
||||
*/
|
||||
cursor?: number;
|
||||
/**
|
||||
* 光标颜色。iOS 下的格式为十六进制颜色值 #000000，安卓下的只支持 default 和 green，Skyline 下无限制
|
||||
* @default #0052d9
|
||||
*/
|
||||
cursorColor?: string;
|
||||
/**
|
||||
* 搜索框聚焦时底部与键盘的距离
|
||||
* @default 0
|
||||
*/
|
||||
cursorSpacing?: number;
|
||||
/**
|
||||
* 是否禁用
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* 是否聚焦
|
||||
* @default false
|
||||
*/
|
||||
focus?: boolean;
|
||||
/**
|
||||
* focus时，点击页面的时候不收起键盘
|
||||
* @default false
|
||||
*/
|
||||
holdKeyboard?: boolean;
|
||||
/**
|
||||
* 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值
|
||||
* @default 'search'
|
||||
*/
|
||||
leftIcon?: string;
|
||||
/**
|
||||
* 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用
|
||||
*/
|
||||
maxcharacter?: number;
|
||||
/**
|
||||
* 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
|
||||
* @default -1
|
||||
*/
|
||||
maxlength?: number;
|
||||
/**
|
||||
* 占位符
|
||||
* @default ''
|
||||
*/
|
||||
placeholder?: string;
|
||||
/**
|
||||
* 指定 placeholder 的样式类
|
||||
* @default input-placeholder
|
||||
*/
|
||||
placeholderClass?: string;
|
||||
/**
|
||||
* 指定 placeholder 的样式
|
||||
* @default ''
|
||||
*/
|
||||
placeholderStyle?: string;
|
||||
/**
|
||||
* 只读状态
|
||||
*/
|
||||
readonly?: boolean;
|
||||
/**
|
||||
* 预览结果列表
|
||||
* @default []
|
||||
*/
|
||||
resultList?: Array<string>;
|
||||
/**
|
||||
* 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
|
||||
* @default -1
|
||||
*/
|
||||
selectionEnd?: number;
|
||||
/**
|
||||
* 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用
|
||||
* @default -1
|
||||
*/
|
||||
selectionStart?: number;
|
||||
/**
|
||||
* 搜索框形状
|
||||
* @default 'square'
|
||||
*/
|
||||
shape?: 'square' | 'round';
|
||||
/**
|
||||
* 拉起键盘的类型
|
||||
* @default 'text'
|
||||
*/
|
||||
type?: 'text' | 'number' | 'idcard' | 'digit' | 'nickname';
|
||||
/**
|
||||
* 值
|
||||
* @default ''
|
||||
*/
|
||||
value?: string;
|
||||
/**
|
||||
* 点击右侧操作按钮文字时触发
|
||||
*/
|
||||
onActionClick?: () => void;
|
||||
/**
|
||||
* 失去焦点时触发
|
||||
*/
|
||||
onBlur?: (context: { value: string }) => void;
|
||||
/**
|
||||
* 值发生变化时触发
|
||||
*/
|
||||
onChange?: (context: { value: string }) => void;
|
||||
/**
|
||||
* 点击清除时触发
|
||||
*/
|
||||
onClear?: (context: { value: string }) => void;
|
||||
/**
|
||||
* 聚焦时触发
|
||||
*/
|
||||
onFocus?: (context: { value: string }) => void;
|
||||
/**
|
||||
* 提交时触发
|
||||
*/
|
||||
onSubmit?: (context: { value: string }) => void;
|
||||
}
|
||||
Reference in New Issue
Block a user