New Huajishe Check ChaoXing

This commit is contained in:
e2hang
2025-10-01 10:01:52 +08:00
parent 240b884eac
commit 80be8ae3cf
1094 changed files with 61709 additions and 0 deletions

View File

@@ -0,0 +1,68 @@
:: BASE_DOC ::
## API
### Picker 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
auto-close | Boolean | true | \- | N
cancel-btn | String / Boolean / Object | true | Typescript`boolean \| string \| ButtonProps` | N
confirm-btn | String / Boolean / Object | true | Typescript`boolean \| string \| ButtonProps`[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
item-height | Number | 80 | \- | N
keys | Object | - | Typescript`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
popup-props | Object | {} | popup properties。Typescript`PopupProps`[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
title | String | '' | \- | N
use-popup | Boolean | true | \- | N
using-custom-navbar | Boolean | false | \- | N
value | Array | - | Typescript`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
default-value | Array | undefined | uncontrolled property。Typescript`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
visible | Boolean | false | \- | N
### Picker Events
name | params | description
-- | -- | --
cancel | - | \-
change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | \-
### PickerItem 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
format | Function | - | Typescript`(option: PickerItemOption) => string` | N
options | Array | [] | Typescript`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-picker-group-height | 400rpx | -
--td-picker-bg-color | @bg-color-container | -
--td-picker-border-radius | 24rpx | -
--td-picker-button-font-size | 32rpx | -
--td-picker-cancel-color | @font-gray-2 | -
--td-picker-confirm-color | @brand-color | -
--td-picker-indicator-bg-color | @bg-color-secondarycontainer | -
--td-picker-indicator-border-radius | 12rpx | -
--td-picker-mask-color-bottom | hsla(0, 0%, 100%, 0.4) | -
--td-picker-mask-color-top | hsla(0, 0%, 100%, 0.92) | -
--td-picker-title-color | @font-gray-1 | -
--td-picker-title-font-size | 36rpx | -
--td-picker-title-font-weight | 600 | -
--td-picker-title-line-height | 52rpx | -
--td-picker-toolbar-height | 116rpx | -
--td-picker-item-active-color | @font-gray-1 | -
--td-picker-item-color | @font-gray-2 | -
--td-picker-item-height | 80rpx | -

View File

@@ -0,0 +1,118 @@
---
title: Picker 选择器
description: 用于一组预设数据中的选择。
spline: form
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-89%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-picker": "tdesign-miniprogram/picker/picker",
"t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/dCCmkymv7aTw" 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>
### 组件类型
#### 基础选择器
单项和多选选择
{{ base }}
#### 地区选择器
支持省市区切换,支持数据联动
{{ area }}
### 组件状态
是否带标题
{{ with-title }}
### 不使用 Popup
{{ without-popup }}
## API
### Picker Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
auto-close | Boolean | true | 自动关闭;在确认、取消、点击遮罩层自动关闭,不需要手动设置 visible | N
cancel-btn | String / Boolean / Object | true | 取消按钮文字。TS 类型:`boolean \| string \| ButtonProps` | N
confirm-btn | String / Boolean / Object | true | 确定按钮文字。TS 类型:`boolean \| string \| ButtonProps`[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
item-height | Number | 80 | PickerItem 的子项高度,单位 rpx | N
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
popup-props | Object | {} | 透传 `Popup` 组件全部属性。TS 类型:`PopupProps`[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
title | String | '' | 标题 | N
use-popup | Boolean | true | 是否使用弹出层包裹 | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
value | Array | - | 选中值。TS 类型:`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
default-value | Array | undefined | 选中值。非受控属性。TS 类型:`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
visible | Boolean | false | 是否显示 | N
### Picker Events
名称 | 参数 | 描述
-- | -- | --
cancel | - | 点击取消按钮时触发
change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 选中变化时候触发,即确认变化时触发
close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 点击确认按钮时触发
pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | 任何一列选中都会触发,不同的列参数不同。`column` 表示第几列变化,`index` 表示变化那一列的选中项下标
### PickerItem Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
format | Function | - | 格式化标签。TS 类型:`(option: PickerItemOption) => string` | N
options | Array | [] | 数据源。TS 类型:`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-picker-group-height | 400rpx | -
--td-picker-bg-color | @bg-color-container | -
--td-picker-border-radius | 24rpx | -
--td-picker-button-font-size | 32rpx | -
--td-picker-cancel-color | @font-gray-2 | -
--td-picker-confirm-color | @brand-color | -
--td-picker-indicator-bg-color | @bg-color-secondarycontainer | -
--td-picker-indicator-border-radius | 12rpx | -
--td-picker-mask-color-bottom | hsla(0, 0%, 100%, 0.4) | -
--td-picker-mask-color-top | hsla(0, 0%, 100%, 0.92) | -
--td-picker-title-color | @font-gray-1 | -
--td-picker-title-font-size | 36rpx | -
--td-picker-title-font-weight | 600 | -
--td-picker-title-line-height | 52rpx | -
--td-picker-toolbar-height | 116rpx | -
--td-picker-item-active-color | @font-gray-1 | -
--td-picker-item-color | @font-gray-2 | -
--td-picker-item-font-size | @font-size-m | -
--td-picker-item-height | 80rpx | 已废弃,建议使用 `itemHeight` 属性设置子项高度。

View File

@@ -0,0 +1,40 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Picker extends SuperComponent {
behaviors: string[];
properties: import("./type").TdPickerProps;
externalClasses: string[];
options: {
multipleSlots: boolean;
};
relations: RelationsOptions;
observers: {
'value, visible'(): void;
keys(obj: any): void;
};
lifetimes: {
attached(): void;
};
data: {
prefix: string;
classPrefix: string;
labelAlias: string;
valueAlias: string;
defaultPopUpProps: {};
defaultPopUpzIndex: number;
pickItemHeight: number;
};
methods: {
updateChildren(): void;
getSelectedValue(): any[];
getColumnIndexes(): any;
onConfirm(): void;
triggerColumnChange({ column, index }: {
column: any;
index: any;
}): void;
onCancel(): void;
onPopupChange(e: any): void;
close(trigger: any): void;
};
ready(): void;
}

View File

@@ -0,0 +1,121 @@
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 { rpx2px } from '../common/utils';
import config from '../common/config';
import props from './props';
import useCustomNavbar from '../mixins/using-custom-navbar';
const { prefix } = config;
const name = `${prefix}-picker`;
let Picker = class Picker extends SuperComponent {
constructor() {
super(...arguments);
this.behaviors = [useCustomNavbar];
this.properties = props;
this.externalClasses = [`${prefix}-class`, `${prefix}-class-confirm`, `${prefix}-class-cancel`, `${prefix}-class-title`];
this.options = {
multipleSlots: true,
};
this.relations = {
'../picker-item/picker-item': {
type: 'child',
linked() {
this.updateChildren();
},
},
};
this.observers = {
'value, visible'() {
this.updateChildren();
},
keys(obj) {
this.setData({
labelAlias: (obj === null || obj === void 0 ? void 0 : obj.label) || 'label',
valueAlias: (obj === null || obj === void 0 ? void 0 : obj.value) || 'value',
});
},
};
this.lifetimes = {
attached() {
this.setData({
pickItemHeight: rpx2px(this.properties.itemHeight),
});
},
};
this.data = {
prefix,
classPrefix: name,
labelAlias: 'label',
valueAlias: 'value',
defaultPopUpProps: {},
defaultPopUpzIndex: 11500,
pickItemHeight: 0,
};
this.methods = {
updateChildren() {
const { pickItemHeight } = this.data;
const { value, defaultValue } = this.properties;
this.$children.forEach((child, index) => {
var _a, _b;
child.setData({
value: (_b = (_a = value === null || value === void 0 ? void 0 : value[index]) !== null && _a !== void 0 ? _a : defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[index]) !== null && _b !== void 0 ? _b : '',
columnIndex: index,
pickItemHeight,
});
child.update();
});
},
getSelectedValue() {
const value = this.$children.map((item) => item._selectedValue);
const label = this.$children.map((item) => item._selectedLabel);
return [value, label];
},
getColumnIndexes() {
const columns = this.$children.map((pickerColumn, columnIndex) => {
return {
column: columnIndex,
index: pickerColumn._selectedIndex,
};
});
return columns;
},
onConfirm() {
const [value, label] = this.getSelectedValue();
const columns = this.getColumnIndexes();
this.close('confirm-btn');
this.triggerEvent('change', { value, label, columns });
this.triggerEvent('confirm', { value, label, columns });
},
triggerColumnChange({ column, index }) {
const [value, label] = this.getSelectedValue();
this.triggerEvent('pick', { value, label, column, index });
},
onCancel() {
this.close('cancel-btn');
this.triggerEvent('cancel');
},
onPopupChange(e) {
const { visible } = e.detail;
this.close('overlay');
this.triggerEvent('visible-change', { visible });
},
close(trigger) {
if (this.data.autoClose) {
this.setData({ visible: false });
}
this.triggerEvent('close', { trigger });
},
};
}
ready() {
this.$children.map((column, index) => (column.columnIndex = index));
}
};
Picker = __decorate([
wxComponent()
], Picker);
export default Picker;

View File

@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-popup": "../popup/popup"
}
}

View File

@@ -0,0 +1,17 @@
<wxs src="../common/utils.wxs" module="_" />
<t-popup
wx:if="{{usePopup}}"
class="class"
visible="{{visible}}"
placement="bottom"
using-custom-navbar="{{usingCustomNavbar || popupProps.usingCustomNavbar}}"
z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}"
overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"
bind:visible-change="onPopupChange"
>
<include src="./template.wxml" />
</t-popup>
<block wx:else>
<include src="./template.wxml" />
</block>

View File

@@ -0,0 +1,101 @@
.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-picker {
position: relative;
background-color: var(--td-picker-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
border-top-left-radius: var(--td-picker-border-radius, 24rpx);
border-top-right-radius: var(--td-picker-border-radius, 24rpx);
}
.t-picker__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
height: var(--td-picker-toolbar-height, 116rpx);
}
.t-picker__title {
flex: 1;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--td-picker-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
line-height: var(--td-picker-title-line-height, 52rpx);
font-weight: var(--td-picker-title-font-weight, 600);
font-size: var(--td-picker-title-font-size, 36rpx);
}
.t-picker__cancel,
.t-picker__confirm {
display: flex;
align-items: center;
justify-content: center;
user-select: none;
font-size: var(--td-picker-button-font-size, 32rpx);
height: 100%;
padding: 0 32rpx;
}
.t-picker__cancel {
color: var(--td-picker-cancel-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
}
.t-picker__confirm {
color: var(--td-picker-confirm-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-picker__main {
position: relative;
display: flex;
justify-content: center;
padding-left: 64rpx;
padding-right: 64rpx;
}
.t-picker__mask {
position: absolute;
left: 0;
right: 0;
z-index: 3;
backface-visibility: hidden;
pointer-events: none;
height: 96rpx;
}
.t-picker__mask--top {
top: 0;
background: linear-gradient(180deg, var(--td-picker-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))) 0%, var(--td-picker-transparent-color) 100%);
}
.t-picker__mask--bottom {
bottom: 0;
background: linear-gradient(180deg, var(--td-picker-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))) 0%, var(--td-picker-transparent-color) 100%);
transform: matrix(1, 0, 0, -1, 0, 0);
}
.t-picker__indicator {
position: absolute;
left: 32rpx;
right: 32rpx;
top: 144rpx;
pointer-events: none;
background-color: var(--td-picker-indicator-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
border-radius: var(--td-picker-indicator-border-radius, 12rpx);
}

View File

@@ -0,0 +1,3 @@
import { TdPickerProps } from './type';
declare const props: TdPickerProps;
export default props;

View File

@@ -0,0 +1,53 @@
const props = {
autoClose: {
type: Boolean,
value: true,
},
cancelBtn: {
type: null,
value: true,
},
confirmBtn: {
type: null,
value: true,
},
header: {
type: Boolean,
value: true,
},
itemHeight: {
type: Number,
value: 80,
},
keys: {
type: Object,
},
popupProps: {
type: Object,
value: {},
},
title: {
type: String,
value: '',
},
usePopup: {
type: Boolean,
value: true,
},
usingCustomNavbar: {
type: Boolean,
value: false,
},
value: {
type: Array,
value: null,
},
defaultValue: {
type: Array,
},
visible: {
type: Boolean,
value: false,
},
};
export default props;

View File

@@ -0,0 +1,21 @@
<wxs src="../common/utils.wxs" module="_" />
<view slot="content" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class">
<view class="{{classPrefix}}__toolbar" wx:if="{{header}}">
<view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel"
>{{cancelBtn}}</view
>
<view class="{{classPrefix}}__title {{prefix}}-class-title">{{title}}</view>
<view class="{{classPrefix}}__confirm {{prefix}}-class-confirm" wx:if="{{confirmBtn}}" bindtap="onConfirm"
>{{confirmBtn}}</view
>
</view>
<slot name="header" />
<view class="{{_.cls(classPrefix + '__main', [])}}">
<slot />
<view class="{{classPrefix}}__mask {{classPrefix}}__mask--top" />
<view class="{{classPrefix}}__mask {{classPrefix}}__mask--bottom" />
<view class="{{classPrefix}}__indicator" style="height: {{pickItemHeight}}px"> </view>
</view>
<slot name="footer" />
</view>

View File

@@ -0,0 +1,58 @@
import { ButtonProps } from '../button/index';
import { PopupProps } from '../popup/index';
import { KeysType } from '../common/common';
export interface TdPickerProps {
autoClose?: {
type: BooleanConstructor;
value?: boolean;
};
cancelBtn?: {
type: null;
value?: boolean | string | ButtonProps;
};
confirmBtn?: {
type: null;
value?: boolean | string | ButtonProps;
};
header?: {
type: BooleanConstructor;
value?: boolean;
};
itemHeight?: {
type: NumberConstructor;
value?: number;
};
keys?: {
type: ObjectConstructor;
value?: KeysType;
};
popupProps?: {
type: ObjectConstructor;
value?: PopupProps;
};
title?: {
type: StringConstructor;
value?: string;
};
usePopup?: {
type: BooleanConstructor;
value?: boolean;
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
value?: {
type: ArrayConstructor;
value?: Array<PickerValue>;
};
defaultValue?: {
type: ArrayConstructor;
value?: Array<PickerValue>;
};
visible?: {
type: BooleanConstructor;
value?: boolean;
};
}
export declare type PickerValue = string | number;

View File

@@ -0,0 +1 @@
export {};