New Huajishe Check ChaoXing
This commit is contained in:
e2hang
@@ -0,0 +1,79 @@
|
||||
|
||||
## API
|
||||
|
||||
### Search Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
|
||||
action | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 | - | required | Y
|
||||
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 / Slot | 'search' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 | - | required | Y
|
||||
readonly | Boolean | undefined | \- | N
|
||||
result-list | Array | [] | Typescript：`Array<string>` | N
|
||||
right-icon | String / Slot | 'close-circle-filled' | `deprecated`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 | `({ value: string })` | \-
|
||||
change | `({ value: string })` | \-
|
||||
clear | `({ value: string })` | \-
|
||||
focus | `({ value: string })` | \-
|
||||
submit | `({ value: string })` | \-
|
||||
|
||||
### 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-font-size | 48rpx | -
|
||||
--td-search-font-size | @font-size-m | -
|
||||
--td-search-height | 80rpx | -
|
||||
--td-search-icon-color | @text-color-placeholder | -
|
||||
--td-search-icon-font-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 | -
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
title: Search 搜索框
|
||||
description: 用于用户输入搜索信息，并进行页面内容搜索。
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-96%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-96%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
|
||||
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-search": "tdesign-miniprogram/search/search"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
<a href="https://developers.weixin.qq.com/s/wG6pximT7xSH" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
|
||||
|
||||
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
|
||||
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
|
||||
</blockquote>
|
||||
|
||||
### 01 组件类型
|
||||
|
||||
基础搜索框
|
||||
|
||||
{{ base }}
|
||||
|
||||
获取焦点后显示取消按钮
|
||||
|
||||
{{ action }}
|
||||
|
||||
### 02 组件样式
|
||||
|
||||
搜索框形状
|
||||
|
||||
{{ shape }}
|
||||
|
||||
### 03 组件状态
|
||||
|
||||
默认状态其他对齐方式
|
||||
|
||||
{{ other }}
|
||||
|
||||
## API
|
||||
|
||||
### Search Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | 样式 | N
|
||||
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
|
||||
action | String / Slot | '' | 自定义右侧操作按钮文字。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 | - | 必需。指定 focus 时的光标位置 | Y
|
||||
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 / Slot | 'search' | 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 的样式 | Y
|
||||
readonly | Boolean | undefined | 只读状态 | N
|
||||
result-list | Array | [] | 预览结果列表。TS 类型：`Array<string>` | N
|
||||
right-icon | String / Slot | 'close-circle-filled' | 已废弃。右侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 | `({ value: string })` | 失去焦点时触发
|
||||
change | `({ value: string })` | 值发生变化时触发
|
||||
clear | `({ value: string })` | 点击清除时触发
|
||||
focus | `({ value: string })` | 聚焦时触发
|
||||
submit | `({ value: string })` | 提交时触发
|
||||
|
||||
### 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-font-size | 48rpx | -
|
||||
--td-search-font-size | @font-size-m | -
|
||||
--td-search-height | 80rpx | -
|
||||
--td-search-icon-color | @text-color-placeholder | -
|
||||
--td-search-icon-font-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
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/search/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/search/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdSearchProps } from './type';
|
||||
declare const props: TdSearchProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,107 @@
|
||||
const props = {
|
||||
action: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
alwaysEmbed: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
center: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
clearTrigger: {
|
||||
type: String,
|
||||
value: 'always',
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
confirmHold: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
confirmType: {
|
||||
type: String,
|
||||
value: 'search',
|
||||
},
|
||||
cursor: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
cursorSpacing: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
holdKeyboard: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
leftIcon: {
|
||||
type: String,
|
||||
value: 'search',
|
||||
},
|
||||
maxcharacter: {
|
||||
type: Number,
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
placeholderClass: {
|
||||
type: String,
|
||||
value: 'input-placeholder',
|
||||
},
|
||||
placeholderStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
required: true,
|
||||
},
|
||||
readonly: {
|
||||
type: null,
|
||||
value: undefined,
|
||||
},
|
||||
resultList: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
selectionEnd: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
selectionStart: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
value: 'square',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
value: 'text',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
27
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/search/search.d.ts
vendored
Normal file
27
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/search/search.d.ts
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class Search extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: import("./type").TdSearchProps;
|
||||
observers: {
|
||||
resultList(val: any): void;
|
||||
'clearTrigger, clearable, disabled, readonly'(): void;
|
||||
};
|
||||
data: {
|
||||
classPrefix: string;
|
||||
prefix: string;
|
||||
isShowResultList: boolean;
|
||||
isSelected: boolean;
|
||||
showClearIcon: boolean;
|
||||
};
|
||||
updateClearIconVisible(value?: boolean): void;
|
||||
onInput(e: any): void;
|
||||
onFocus(e: any): void;
|
||||
onBlur(e: any): void;
|
||||
handleClear(): void;
|
||||
onConfirm(e: any): void;
|
||||
onActionClick(): void;
|
||||
onSelectResultItem(e: any): void;
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
import { getCharacterLength } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-search`;
|
||||
let Search = class Search extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-input-container`,
|
||||
`${prefix}-class-input`,
|
||||
`${prefix}-class-action`,
|
||||
`${prefix}-class-left`,
|
||||
`${prefix}-class-clear`,
|
||||
];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.properties = props;
|
||||
this.observers = {
|
||||
resultList(val) {
|
||||
const { isSelected } = this.data;
|
||||
if (val.length) {
|
||||
if (isSelected) {
|
||||
this.setData({
|
||||
isShowResultList: false,
|
||||
isSelected: false,
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.setData({
|
||||
isShowResultList: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.setData({
|
||||
isShowResultList: false,
|
||||
});
|
||||
}
|
||||
},
|
||||
'clearTrigger, clearable, disabled, readonly'() {
|
||||
this.updateClearIconVisible();
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
classPrefix: name,
|
||||
prefix,
|
||||
isShowResultList: false,
|
||||
isSelected: false,
|
||||
showClearIcon: true,
|
||||
};
|
||||
}
|
||||
updateClearIconVisible(value = false) {
|
||||
const { clearTrigger, disabled, readonly } = this.properties;
|
||||
if (disabled || readonly) {
|
||||
this.setData({ showClearIcon: false });
|
||||
return;
|
||||
}
|
||||
this.setData({ showClearIcon: value || String(clearTrigger) === 'always' });
|
||||
}
|
||||
onInput(e) {
|
||||
let { value } = e.detail;
|
||||
const { maxcharacter } = this.properties;
|
||||
if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
|
||||
const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
|
||||
value = characters;
|
||||
}
|
||||
this.setData({
|
||||
value,
|
||||
});
|
||||
this.triggerEvent('change', { value });
|
||||
}
|
||||
onFocus(e) {
|
||||
const { value } = e.detail;
|
||||
this.updateClearIconVisible(true);
|
||||
this.triggerEvent('focus', { value });
|
||||
}
|
||||
onBlur(e) {
|
||||
const { value } = e.detail;
|
||||
this.updateClearIconVisible();
|
||||
this.triggerEvent('blur', { value });
|
||||
}
|
||||
handleClear() {
|
||||
this.setData({ value: '' });
|
||||
this.triggerEvent('clear', { value: '' });
|
||||
this.triggerEvent('change', { value: '' });
|
||||
}
|
||||
onConfirm(e) {
|
||||
const { value } = e.detail;
|
||||
this.triggerEvent('submit', { value });
|
||||
}
|
||||
onActionClick() {
|
||||
this.triggerEvent('action-click');
|
||||
}
|
||||
onSelectResultItem(e) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
const item = this.properties.resultList[index];
|
||||
this.setData({
|
||||
value: item,
|
||||
isSelected: true,
|
||||
});
|
||||
this.triggerEvent('change', { value: item });
|
||||
this.triggerEvent('selectresult', { index, item });
|
||||
}
|
||||
};
|
||||
Search = __decorate([
|
||||
wxComponent()
|
||||
], Search);
|
||||
export default Search;
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-cell": "../cell/cell"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
<wxs src="./search.wxs" module="_this"></wxs>
|
||||
|
||||
<view style="{{_._style([style, customStyle])}}" class="class {{classPrefix}} {{prefix}}-class">
|
||||
<view
|
||||
class="{{classPrefix}}__input-box {{prefix}}-{{focus ? 'is-focused' : 'not-focused'}} {{classPrefix}}__input-box--{{center ? 'center' : ''}} {{classPrefix}}__input-box--{{shape}} {{prefix}}-class-input-container"
|
||||
>
|
||||
<!-- <view wx:if="{{label}}" class="{{classPrefix}}__label {{prefix}}-class-label">{{label}}</view>
|
||||
<slot name="label" /> -->
|
||||
<t-icon
|
||||
wx:if="{{leftIcon}}"
|
||||
name="{{leftIcon}}"
|
||||
class="{{prefix}}-icon {{prefix}}-class-left"
|
||||
aria-hidden="{{true}}"
|
||||
/>
|
||||
<slot wx:else name="left-icon" />
|
||||
|
||||
<input
|
||||
type="{{type}}"
|
||||
name="input"
|
||||
maxlength="{{maxlength}}"
|
||||
disabled="{{disabled || readonly}}"
|
||||
class="{{prefix}}-input__keyword {{prefix}}-class-input {{ disabled ? prefix + '-input--disabled' : ''}}"
|
||||
focus="{{focus}}"
|
||||
value="{{value}}"
|
||||
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}}"
|
||||
placeholder="{{placeholder}}"
|
||||
placeholder-style="{{placeholderStyle}}"
|
||||
placeholder-class="{{placeholderClass}} {{classPrefix}}__placeholder {{classPrefix}}__placeholder--{{center ? 'center': 'normal'}}"
|
||||
bind:input="onInput"
|
||||
bind:focus="onFocus"
|
||||
bind:blur="onBlur"
|
||||
bind:confirm="onConfirm"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{value !=='' && clearable && showClearIcon}}"
|
||||
class="{{classPrefix}}__clear {{prefix}}-class-clear"
|
||||
catch:tap="handleClear"
|
||||
aria-role="button"
|
||||
aria-label="清除"
|
||||
>
|
||||
<t-icon name="close-circle-filled" size="inherit" color="inherit" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
wx:if="{{action}}"
|
||||
class="{{classPrefix}}__search-action {{prefix}}-class-action"
|
||||
catch:tap="onActionClick"
|
||||
aria-role="button"
|
||||
>
|
||||
{{action}}
|
||||
</view>
|
||||
<slot wx:else name="action" />
|
||||
</view>
|
||||
|
||||
<view wx:if="{{isShowResultList && !isSelected}}" class="{{classPrefix}}__result-list" aria-role="listbox">
|
||||
<t-cell
|
||||
wx:for="{{resultList}}"
|
||||
wx:key="index"
|
||||
data-index="{{index}}"
|
||||
class="{{classPrefix}}__result-item"
|
||||
hover
|
||||
bind:tap="onSelectResultItem"
|
||||
aria-role="option"
|
||||
>
|
||||
<rich-text slot="title" nodes="{{_this.highLight(item, value)}}"></rich-text>
|
||||
</t-cell>
|
||||
</view>
|
||||
@@ -0,0 +1,6 @@
|
||||
var highLight = function (label, keyword) {
|
||||
return label.replace(keyword, '<span class="t-search__result-item--highLight">' + keyword + '</span>');
|
||||
};
|
||||
module.exports = {
|
||||
highLight: highLight,
|
||||
};
|
||||
@@ -0,0 +1,116 @@
|
||||
.t-float-left {
|
||||
float: left;
|
||||
}
|
||||
.t-float-right {
|
||||
float: right;
|
||||
}
|
||||
@keyframes tdesign-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.hotspot-expanded.relative {
|
||||
position: relative;
|
||||
}
|
||||
.hotspot-expanded::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.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-size: var(--td-search-font-size, var(--td-font-size-m, 32rpx));
|
||||
padding-left: 10rpx;
|
||||
min-height: 48rpx;
|
||||
line-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-font-size, 48rpx);
|
||||
}
|
||||
.t-search__clear {
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
font-size: var(--td-search-clear-icon-font-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__clear.relative {
|
||||
position: relative;
|
||||
}
|
||||
.t-search__clear::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.t-search__search-action {
|
||||
margin-left: 30rpx;
|
||||
font-size: var(--td-search-font-size, var(--td-font-size-m, 32rpx));
|
||||
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;
|
||||
}
|
||||
.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 .t-search__result-item {
|
||||
padding-left: 0;
|
||||
}
|
||||
.t-search__result-list .t-search__result-item::after {
|
||||
left: 0;
|
||||
}
|
||||
108
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/search/type.d.ts
vendored
Normal file
108
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/search/type.d.ts
vendored
Normal file
@@ -0,0 +1,108 @@
|
||||
export interface TdSearchProps {
|
||||
action?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
adjustPosition?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
alwaysEmbed?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
center?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
clearTrigger?: {
|
||||
type: StringConstructor;
|
||||
value?: 'always' | 'focus';
|
||||
};
|
||||
clearable?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmHold?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmType?: {
|
||||
type: StringConstructor;
|
||||
value?: 'send' | 'search' | 'next' | 'go' | 'done';
|
||||
};
|
||||
cursor: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
required?: boolean;
|
||||
};
|
||||
cursorSpacing?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
focus?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
holdKeyboard?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
leftIcon?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
maxcharacter?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
maxlength?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
placeholder?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
placeholderClass?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
placeholderStyle: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
readonly?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
resultList?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string>;
|
||||
};
|
||||
selectionEnd?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
selectionStart?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: 'square' | 'round';
|
||||
};
|
||||
type?: {
|
||||
type: StringConstructor;
|
||||
value?: 'text' | 'number' | 'idcard' | 'digit' | 'nickname';
|
||||
};
|
||||
value?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user