first commit

This commit is contained in:
lingxiao865
2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions

View File

@@ -0,0 +1,77 @@
:: BASE_DOC ::
## API
### Picker Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
auto-close | Boolean | true | \- | N
cancel-btn | String / Boolean | true | Typescript: `boolean \| string` | N
confirm-btn | String / Boolean | true | Typescript: `boolean \| string` | N
header | Boolean | true | \- | N
item-height | Number | 40 | \- | N
keys | Object | - | Typescript: `KeysType`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/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/blob/develop/packages/uniapp-components/picker/type.ts) | N
title | String | '' | \- | N
use-popup | Boolean | true | \- | N
using-custom-navbar | Boolean | false | \- | N
value | Array | - | `v-model:value` is supported。Typescript: `Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/picker/type.ts) | N
default-value | Array | - | uncontrolled property。Typescript: `Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/picker/type.ts) | N
visible | Boolean | false | \- | N
visible-item-count | Number | 5 | \- | N
### Picker Events
name | params | description
-- | -- | --
cancel | \- | \-
change | `(context: { value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number; disabled?: boolean; }> } )` | \-
close | `(context: { trigger: TriggerSource })` | [see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
confirm | `(context: { value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number; disabled?: boolean; }> } )` | \-
pick | `(context: { value: Array<PickerValue>, label: string, column: number, index: number })` | \-
### Picker Slots
name | Description
-- | --
\- | \-
content | \-
footer | \-
header | \-
### PickerItem Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
format | Function | - | Typescript: `(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N
options | Array | [] | Typescript: `PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number; icon?: string }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/picker-item/type.ts) | N
### PickerItem Slots
name | Description
-- | --
label-suffix-index | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-picker-bg-color | @bg-color-container | -
--td-picker-border-radius | 24rpx | -
--td-picker-button-font | @font-body-large | -
--td-picker-cancel-color | @text-color-secondary | -
--td-picker-confirm-color | @brand-color | -
--td-picker-indicator-bg-color | @bg-color-secondarycontainer | -
--td-picker-indicator-border-radius | 12rpx | -
--td-picker-title-color | @text-color-primary | -
--td-picker-title-font | @font-title-large | -
--td-picker-toolbar-height | 116rpx | -
--td-picker-transparent-color | --td-picker-transparent-color | -
--td-picker-item-active-color | @text-color-primary | -
--td-picker-item-color | @text-color-secondary | -
--td-picker-item-font-size | @font-size-m | -

View File

@@ -0,0 +1,112 @@
---
title: Picker 选择器
description: 用于一组预设数据中的选择。
spline: form
isComponent: true
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TPicker from '@tdesign/uniapp/picker/picker.vue';
import TPickerItem from '@tdesign/uniapp/picker-item/picker-item.vue';
```
### 组件类型
#### 基础选择器
单项和多选选择
{{ base }}
#### 地区选择器
支持省市区切换,支持数据联动
{{ area }}
### 组件样式
是否带标题
{{ with-title }}
## API
### Picker Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
auto-close | Boolean | true | 自动关闭;在确认、取消、点击遮罩层自动关闭,不需要手动设置 visible | N
cancel-btn | String / Boolean | true | 取消按钮文字。TS 类型:`boolean \| string` | N
confirm-btn | String / Boolean | true | 确定按钮文字。TS 类型:`boolean \| string` | N
header | Boolean | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容 | N
item-height | Number | 40 | PickerItem 的子项高度,单位 `px` | N
keys | Object | - | 用来定义 value / label / icon 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts) | N
popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型:`PopupProps`[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/picker/type.ts) | N
title | String | '' | 标题 | N
use-popup | Boolean | true | 是否使用弹出层包裹 | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型:`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/picker/type.ts) | N
default-value | Array | - | 选中值。非受控属性。TS 类型:`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/picker/type.ts) | N
visible | Boolean | false | 是否显示。支持语法糖 `v-model:visible` | N
visible-item-count | Number | 5 | 可视区域 PickerItem 的子项个数 | N
### Picker Events
名称 | 参数 | 描述
-- | -- | --
cancel | \- | 点击取消按钮时触发
change | `(context: { value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number; disabled?: boolean; }> } )` | 选中变化时候触发,即确认变化时触发
close | `(context: { trigger: TriggerSource })` | 关闭时触发。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
confirm | `(context: { value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number; disabled?: boolean; }> } )` | 点击确认按钮时触发
pick | `(context: { value: Array<PickerValue>, label: string, column: number, index: number })` | 任何一列选中都会触发,不同的列参数不同。`column` 表示第几列变化,`index` 表示变化那一列的选中项下标
### Picker Slots
名称 | 描述
-- | --
\- | 默认插槽,自定义内容
content | 中间内容,介于头部跟内容之间
footer | 底部内容
header | 自定义 `header` 显示内容
### PickerItem Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
format | Function | - | 格式化标签。TS 类型:`(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N
options | Array | [] | 数据源。TS 类型:`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number; icon?: string }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/picker-item/type.ts) | N
### PickerItem Slots
名称 | 描述
-- | --
label-suffix-index | 列表子项后置插槽,用于自定义标签文本之后的内容。
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-picker-bg-color | @bg-color-container | -
--td-picker-border-radius | 24rpx | -
--td-picker-button-font | @font-body-large | -
--td-picker-cancel-color | @text-color-secondary | -
--td-picker-confirm-color | @brand-color | -
--td-picker-indicator-bg-color | @bg-color-secondarycontainer | -
--td-picker-indicator-border-radius | 12rpx | -
--td-picker-title-color | @text-color-primary | -
--td-picker-title-font | @font-title-large | -
--td-picker-toolbar-height | 116rpx | -
--td-picker-transparent-color | --td-picker-transparent-color | -
--td-picker-item-active-color | @text-color-primary | -
--td-picker-item-color | @text-color-secondary | -
--td-picker-item-font-size | @font-size-m | -

View File

@@ -0,0 +1,71 @@
.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))));
font: var(--td-picker-title-font, var(--td-font-title-large, 600 36rpx / 52rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
}
.t-picker__cancel,
.t-picker__confirm {
display: flex;
align-items: center;
justify-content: center;
user-select: none;
font: var(--td-picker-button-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
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;
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,315 @@
<template>
<view>
<t-popup
v-if="usePopup"
:visible="dataVisible"
placement="bottom"
:close-on-overlay-click="autoClose"
:show-overlay="isShowOverlay(popupProps && popupProps.showOverlay, true)"
:using-custom-navbar="usingCustomNavbar || (popupProps && popupProps.usingCustomNavbar)"
:custom-navbar-height="coalesce(customNavbarHeight, popupProps && popupProps.usingCustomNavbar)"
:z-index="(popupProps && popupProps.zIndex) || defaultPopUpzIndex"
:overlay-props="(popupProps && popupProps.overlayProps) || defaultPopUpProps"
@visible-change="onPopupChange"
>
<template #content>
<view
:style="tools._style([customStyle])"
:class="classPrefix + ' ' + tClass"
>
<view
v-if="header"
:class="classPrefix + '__toolbar'"
>
<view
v-if="cancelBtn"
:class="classPrefix + '__cancel ' + tClassCancel"
@click="onCancel"
>
{{ cancelBtn }}
</view>
<view :class="classPrefix + '__title ' + tClassTitle">
{{ title }}
</view>
<view
v-if="confirmBtn"
:class="classPrefix + '__confirm ' + tClassConfirm"
@click="onConfirm"
>
{{ confirmBtn }}
</view>
</view>
<slot name="header" />
<slot name="content" />
<view
:class="tools.cls(classPrefix + '__main', [])"
disable-scroll
>
<slot />
<view :class="classPrefix + '__mask ' + classPrefix + '__mask--top'" />
<view :class="classPrefix + '__mask ' + classPrefix + '__mask--bottom'" />
<view
:class="classPrefix + '__indicator'"
:style="'height: ' + itemHeight + 'px; top: ' + indicatorTop + 'px'"
/>
</view>
<slot name="footer" />
</view>
</template>
</t-popup>
<block v-else>
<view
:style="tools._style([customStyle])"
:class="classPrefix + ' ' + tClass"
>
<view
v-if="header"
:class="classPrefix + '__toolbar'"
>
<view
v-if="cancelBtn"
:class="classPrefix + '__cancel ' + tClassCancel"
@click="onCancel"
>
{{ cancelBtn }}
</view>
<view :class="classPrefix + '__title ' + tClassTitle">
{{ title }}
</view>
<view
v-if="confirmBtn"
:class="classPrefix + '__confirm ' + tClassConfirm"
@click="onConfirm"
>
{{ confirmBtn }}
</view>
</view>
<slot name="header" />
<slot name="content" />
<view
:class="tools.cls(classPrefix + '__main', [])"
disable-scroll
>
<slot />
<view :class="classPrefix + '__mask ' + classPrefix + '__mask--top'" />
<view :class="classPrefix + '__mask ' + classPrefix + '__mask--bottom'" />
<view
:class="classPrefix + '__indicator'"
:style="'height: ' + itemHeight + 'px; top: ' + indicatorTop + 'px'"
/>
</view>
<slot name="footer" />
</view>
</block>
</view>
</template>
<script>
import TPopup from '../popup/popup';
import { uniComponent } from '../common/src/index';
import { coalesce } from '../common/utils';
import { prefix } from '../common/config';
import props from './props';
import useCustomNavbar from '../mixins/using-custom-navbar';
import tools from '../common/utils.wxs';
import { ParentMixin, RELATION_MAP } from '../common/relation';
const name = `${prefix}-picker`;
const DEFAULT_KEYS = { value: 'value', label: 'label', icon: 'icon' };
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
externalClasses: [
`${prefix}-class`,
`${prefix}-class-confirm`,
`${prefix}-class-cancel`,
`${prefix}-class-title`,
],
components: {
TPopup,
},
mixins: [
ParentMixin(RELATION_MAP.PickerItem),
useCustomNavbar,
],
props: {
...props,
},
emits: [
'visible-change',
'update:visible',
],
data() {
return {
prefix,
classPrefix: name,
defaultPopUpProps: {},
defaultPopUpzIndex: 11500,
indicatorTop: 72, // 默认indicator位置会动态计算
tools,
dataValue: coalesce(this.value, this.defaultValue),
dataVisible: this.visible,
};
},
watch: {
value: {
handler(value) {
this.dataValue = value;
},
immediate: true,
},
visible: {
handler(v) {
this.dataVisible = v;
},
immediate: true,
},
dataVisible: {
handler() {
this.onWatchVisible();
setTimeout(() => {
this.onWatchVisible();
});
},
immediate: true,
},
dataValue: {
handler() {
this.onWatchVisible();
},
immediate: true,
},
itemHeight: {
handler() {
this.updateIndicatorPosition();
},
immediate: true,
},
visibleItemCount: {
handler() {
this.updateIndicatorPosition();
},
immediate: true,
},
},
mounted() {
this.children?.map((column, index) => (column.columnIndex = index));
this.updateIndicatorPosition();
setTimeout(() => {
this.updateChildren();
});
},
methods: {
coalesce,
innerAfterLinked() {
this.updateChildren();
},
updateChildren() {
const { pickItemHeight } = this;
const { value, defaultValue, keys, visibleItemCount, itemHeight } = this;
this.children?.forEach((child, index) => {
child.value = coalesce(value?.[index], defaultValue?.[index], '');
child.columnIndex = index;
child.pickItemHeight = pickItemHeight;
child.itemHeight = itemHeight;
child.visibleItemCount = visibleItemCount;
child.keys = { ...DEFAULT_KEYS, ...(keys || {}) };
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) => ({
column: columnIndex,
index: pickerColumn._selectedIndex,
}));
return columns;
},
onConfirm() {
const [value, label] = this.getSelectedValue();
const columns = this.getColumnIndexes();
this.close('confirm-btn');
this.$emit('confirm', { value, label, columns });
if (JSON.stringify(this.dataValue) === JSON.stringify(value)) return;
this.$emit('change', { value, label, columns });
},
triggerColumnChange({ column, index }) {
const [value, label] = this.getSelectedValue();
this.$emit('pick', { value, label, column, index });
},
onCancel() {
this.close('cancel-btn');
this.$emit('cancel');
},
onPopupChange(e) {
const { visible } = e;
this.close('overlay');
this.$emit('visible-change', { visible });
this.$emit('update:visible', visible);
},
close(trigger) {
if (this.autoClose) {
this.dataVisible = false;
this.$emit('update:visible', false);
}
this.$emit('close', { trigger });
},
updateIndicatorPosition() {
const { itemHeight, visibleItemCount } = this;
const indicatorTop = ((visibleItemCount - 1) / 2) * itemHeight;
this.indicatorTop = indicatorTop;
},
onWatchVisible() {
const {
usePopup,
dataVisible,
} = this;
if (!usePopup || dataVisible) {
this.updateChildren();
this.updateIndicatorPosition();
}
},
isShowOverlay(value, defaultValue) {
return tools.isBoolean(value) ? value : defaultValue;
},
},
});
</script>
<style scoped>
@import './picker.css';
/* #ifndef MP-WEIXIN */
/* 适配 qq 小程序等 */
:deep(t-picker-item) {
z-index: 1;
flex: 1;
}
/* #endif */
</style>

View File

@@ -0,0 +1,95 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */
import type { TdPickerProps } from './type';
export default {
/** 自动关闭;在确认、取消、点击遮罩层自动关闭,不需要手动设置 visible */
autoClose: {
type: Boolean,
default: true,
},
/** 取消按钮文字 */
cancelBtn: {
type: [String, Boolean],
default: true as TdPickerProps['cancelBtn'],
},
/** 确定按钮文字 */
confirmBtn: {
type: [String, Boolean],
default: true as TdPickerProps['confirmBtn'],
},
/** 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容 */
header: {
type: Boolean,
default: true as TdPickerProps['header'],
},
/** PickerItem 的子项高度,单位 `px` */
itemHeight: {
type: Number,
default: 40,
},
/** 用来定义 value / label / icon 在 `options` 中对应的字段别名 */
keys: {
type: Object,
},
/** 透传 Popup 组件全部属性 */
popupProps: {
type: Object,
default: () => ({}),
},
/** 标题 */
title: {
type: String,
default: '',
},
/** 是否使用弹出层包裹 */
usePopup: {
type: Boolean,
default: true,
},
/** 是否使用了自定义导航栏 */
usingCustomNavbar: Boolean,
/** 选中值 */
value: {
type: Array,
},
/** 选中值,非受控属性 */
defaultValue: {
type: Array,
},
/** 是否显示。支持语法糖 `v-model:visible` */
visible: Boolean,
/** 可视区域 PickerItem 的子项个数 */
visibleItemCount: {
type: Number,
default: 5,
},
/** 点击取消按钮时触发 */
onCancel: {
type: Function,
default: () => ({}),
},
/** 选中变化时候触发,即确认变化时触发 */
onChange: {
type: Function,
default: () => ({}),
},
/** 关闭时触发 */
onClose: {
type: Function,
default: () => ({}),
},
/** 点击确认按钮时触发 */
onConfirm: {
type: Function,
default: () => ({}),
},
/** 任何一列选中都会触发,不同的列参数不同。`column` 表示第几列变化,`index` 表示变化那一列的选中项下标 */
onPick: {
type: Function,
default: () => ({}),
},
};

View File

@@ -0,0 +1,114 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */
import type { TdPopupProps as PopupProps } from '../popup/type';
import type { KeysType } from '../common/common';
export interface TdPickerProps {
/**
* 自动关闭;在确认、取消、点击遮罩层自动关闭,不需要手动设置 visible
* @default true
*/
autoClose?: boolean;
/**
* 取消按钮文字
* @default true
*/
cancelBtn?: boolean | string;
/**
* 确定按钮文字
* @default true
*/
confirmBtn?: boolean | string;
/**
* 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容
* @default true
*/
header?: boolean;
/**
* PickerItem 的子项高度,单位 `px`
* @default 40
*/
itemHeight?: number;
/**
* 用来定义 value / label / icon 在 `options` 中对应的字段别名
*/
keys?: KeysType;
/**
* 透传 Popup 组件全部属性
* @default {}
*/
popupProps?: PopupProps;
/**
* 标题
* @default ''
*/
title?: string;
/**
* 是否使用弹出层包裹
* @default true
*/
usePopup?: boolean;
/**
* 是否使用了自定义导航栏
* @default false
*/
usingCustomNavbar?: boolean;
/**
* 选中值
*/
value?: Array<PickerValue>;
/**
* 选中值,非受控属性
*/
defaultValue?: Array<PickerValue>;
/**
* 是否显示。支持语法糖 `v-model:visible`
* @default false
*/
visible?: boolean;
/**
* 可视区域 PickerItem 的子项个数
* @default 5
*/
visibleItemCount?: number;
/**
* 点击取消按钮时触发
* @default ''
*/
onCancel?: () => void;
/**
* 选中变化时候触发,即确认变化时触发
* @default ''
*/
onChange?: (context: {
value: Array<PickerValue>;
label: string;
columns: Array<{ column: number; index: number; disabled?: boolean }>;
}) => void;
/**
* 关闭时触发
*/
onClose?: (context: { trigger: TriggerSource }) => void;
/**
* 点击确认按钮时触发
* @default ''
*/
onConfirm?: (context: {
value: Array<PickerValue>;
label: string;
columns: Array<{ column: number; index: number; disabled?: boolean }>;
}) => void;
/**
* 任何一列选中都会触发,不同的列参数不同。`column` 表示第几列变化,`index` 表示变化那一列的选中项下标
* @default ''
*/
onPick?: (context: { value: Array<PickerValue>; label: string; column: number; index: number }) => void;
}
export type PickerValue = string | number;
export type TriggerSource = 'overlay' | 'cancel-btn' | 'confirm-btn';