diff --git a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
index 74143e4db..d77925f97 100644
--- a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
@@ -3222,12 +3222,12 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
- Cancel
+ 取消
- title test
+ 选择时间
ConfigProvider mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -6493,12 +6494,12 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
- Cancel
+ 取消
- title test
+ 选择时间
ConfigProvider otherEnVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index c614778a5..04dd680f6 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -564,6 +564,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -1031,6 +1032,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -2644,6 +2646,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -3247,6 +3250,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -3584,6 +3588,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -4278,6 +4283,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -4762,6 +4768,341 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 年 月 日
+
+
+
+
+
+
+
+
@@ -5466,6 +5807,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
| N
onChange | Function | | Typescript：`(value: DateValue) => void`
| N
+onClose | Function | | Typescript：`(trigger: TriggerSource) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts)。
`import { TriggerSource } from '@Picker'`
| N
onConfirm | Function | | Typescript：`(value: DateValue) => void`
| N
onPick | Function | | Typescript：`(value: DateValue) => void`
| N
@@ -28,12 +36,13 @@ name | params | description
-- | -- | --
cancel | `(context: { e: MouseEvent })` | \-
change | `(value: DateValue)` | \-
+close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts)。
`import { TriggerSource } from '@Picker'`
confirm | `(value: DateValue)` | \-
pick | `(value: DateValue)` | \-
-
### CSS Variables
+
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
---td-data-time-picker-year-width | 64px | -
+--td-data-time-picker-year-width | 64px | -
\ No newline at end of file
diff --git a/src/date-time-picker/date-time-picker.md b/src/date-time-picker/date-time-picker.md
index 9eab00eb1..d8050ebc6 100644
--- a/src/date-time-picker/date-time-picker.md
+++ b/src/date-time-picker/date-time-picker.md
@@ -1,23 +1,32 @@
:: BASE_DOC ::
## API
+
### DateTimePicker Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
+autoClose | Boolean | false | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
cancelBtn | String | 取消 | 取消按钮文字 | N
confirmBtn | String | - | 确定按钮文字 | N
end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
+filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)。TS 类型：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
+footer | Slot / Function | - | 底部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
format | String | 'YYYY-MM-DD HH:mm:ss' | 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format) | N
-mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues | Array ` `type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
+header | Slot / Function | - | 顶部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
renderLabel | Function | - | 自定义label。TS 类型：`(type: string, value: number) => string` | N
showWeek | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
+steps | Object | - | 时间间隔步数，示例：`{ minute: 5 }`。TS 类型：`Record` | N
title | String | '选择时间' | 标题 | N
-value | String / Number | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`DateValue` `type DateValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
-defaultValue | String / Number | - | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
+usePopup | Boolean | false | 是否使用弹出层包裹 | N
+value | String / Number | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
+defaultValue | String / Number | - | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
+visible | Boolean | false | 是否显示 | N
onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
取消按钮点击时触发 | N
onChange | Function | | TS 类型：`(value: DateValue) => void`
value改变时触发 | N
+onClose | Function | | TS 类型：`(trigger: TriggerSource) => void`
关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts)。
`import { TriggerSource } from '@Picker'`
| N
onConfirm | Function | | TS 类型：`(value: DateValue) => void`
确认按钮点击时触发 | N
onPick | Function | | TS 类型：`(value: DateValue) => void`
选中值发生变化时触发 | N
@@ -27,12 +36,13 @@ onPick | Function | | TS 类型：`(value: DateValue) => void`
选中值发
-- | -- | --
cancel | `(context: { e: MouseEvent })` | 取消按钮点击时触发
change | `(value: DateValue)` | value改变时触发
+close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts)。
`import { TriggerSource } from '@Picker'`
confirm | `(value: DateValue)` | 确认按钮点击时触发
pick | `(value: DateValue)` | 选中值发生变化时触发
-
### CSS Variables
+
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
---td-data-time-picker-year-width | 64px | -
+--td-data-time-picker-year-width | 64px | -
\ No newline at end of file
diff --git a/src/date-time-picker/date-time-picker.tsx b/src/date-time-picker/date-time-picker.tsx
index 882619cbb..7062b52cc 100644
--- a/src/date-time-picker/date-time-picker.tsx
+++ b/src/date-time-picker/date-time-picker.tsx
@@ -12,6 +12,8 @@ import { useVModel } from '../shared';
import { Picker as TPicker } from '../picker';
import { PickerColumn, PickerColumnItem, PickerValue, PickerContext } from '../picker/type';
import { usePrefixClass, useConfig } from '../hooks/useClass';
+import type { TimeModeValues } from './type';
+import type { TriggerSource } from '../picker/type';
dayjs.extend(weekday);
dayjs.extend(customParseFormat);
@@ -41,12 +43,14 @@ export default defineComponent({
const confirmButtonText = computed(() => props.confirmBtn || globalConfig.value.confirm);
const cancelButtonText = computed(() => props.cancelBtn || globalConfig.value.cancel);
+
const normalize = (val: string | number, defaultDay: Dayjs) =>
val && dayjs(val).isValid() ? dayjs(val) : defaultDay;
const start = computed(() => normalize(props.start, dayjs().subtract(10, 'year')));
const end = computed(() => normalize(props.end, dayjs().add(10, 'year')));
const meaningColumn = computed(() => getMeaningColumn(props.mode));
+
const isTimeMode = computed(
() => isArray(props.mode) && props.mode[0] == null && ['hour', 'minute', 'second'].includes(props.mode[1]),
);
@@ -104,16 +108,22 @@ export default defineComponent({
second: globalConfig.value.secondLabel,
};
- const generateColumn = (start: number, end: number, type: string) => {
+ const generateColumn = (start: number, end: number, type: TimeModeValues) => {
const arr: PickerColumnItem[] = [];
- for (let i = start; i <= end; i++) {
+ const step = props.steps?.[type] ?? 1;
+ for (let i = start; i <= end; i += step) {
const value = i.toString();
arr.push({
label: props.renderLabel ? props.renderLabel(type, i) : `${value} ${typeUnit[type]}`,
value: type === 'month' ? `${+value - 1}` : value,
});
}
- ret.push(arr);
+
+ if (typeof props.filter === 'function') {
+ ret.push(props.filter(type, arr));
+ } else {
+ ret.push(arr);
+ }
};
if (meaningColumn.value.includes('year')) {
@@ -153,11 +163,14 @@ export default defineComponent({
});
const onConfirm = (value: string[]) => {
- const dayObject = value.reduce((map, cur, index) => {
- const type = meaningColumn.value[index];
- map[type] = cur;
- return map;
- }, {});
+ const dayObject = value.reduce(
+ (map: Record, cur, index) => {
+ const type = meaningColumn.value[index];
+ map[type] = cur;
+ return map;
+ },
+ {} as Record,
+ );
const cur = dayjs(dayObject);
props.onConfirm?.(dayjs(cur || curDate.value).format(props.format));
setDateTimePickerValue(dayjs(cur || curDate.value).format(props.format));
@@ -167,6 +180,10 @@ export default defineComponent({
props.onCancel?.({ e: context.e });
};
+ const onClose = (triggerSource: TriggerSource) => {
+ props.onClose?.(triggerSource);
+ };
+
const onPick = (value: Array, context: PickerContext) => {
const { column, index } = context;
const type = meaningColumn.value[column];
@@ -189,9 +206,14 @@ export default defineComponent({
confirm-btn={confirmButtonText.value}
cancel-btn={cancelButtonText.value}
columns={columns.value}
+ header={props.header}
+ footer={props.footer}
+ usePopup={props.usePopup}
+ visible={props.visible}
onConfirm={onConfirm}
onCancel={onCancel}
onPick={onPick}
+ onClose={onClose}
/>
);
};
diff --git a/src/date-time-picker/demos/mobile.vue b/src/date-time-picker/demos/mobile.vue
index c2187e532..d35904dd0 100644
--- a/src/date-time-picker/demos/mobile.vue
+++ b/src/date-time-picker/demos/mobile.vue
@@ -10,6 +10,9 @@
+
+
+
diff --git a/src/date-time-picker/demos/steps.vue b/src/date-time-picker/demos/steps.vue
new file mode 100644
index 000000000..7bf5e66ec
--- /dev/null
+++ b/src/date-time-picker/demos/steps.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
diff --git a/src/date-time-picker/props.ts b/src/date-time-picker/props.ts
index b94cd341e..34d7e7b79 100644
--- a/src/date-time-picker/props.ts
+++ b/src/date-time-picker/props.ts
@@ -8,10 +8,12 @@ import { TdDateTimePickerProps } from './type';
import { PropType } from 'vue';
export default {
+ /** 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible */
+ autoClose: Boolean,
/** 取消按钮文字 */
cancelBtn: {
type: String,
- default: '',
+ default: '取消',
},
/** 确定按钮文字 */
confirmBtn: {
@@ -22,11 +24,23 @@ export default {
end: {
type: [String, Number] as PropType,
},
+ /** 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) */
+ filter: {
+ type: Function as PropType,
+ },
+ /** 底部内容 */
+ footer: {
+ type: Function as PropType,
+ },
/** 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format) */
format: {
type: String,
default: 'YYYY-MM-DD HH:mm:ss',
},
+ /** 顶部内容 */
+ header: {
+ type: Function as PropType,
+ },
/** year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒 */
mode: {
type: [String, Array] as PropType,
@@ -42,26 +56,38 @@ export default {
start: {
type: [String, Number] as PropType,
},
+ /** 时间间隔步数，示例：`{ minute: 5 }` */
+ steps: {
+ type: Object as PropType,
+ },
/** 标题 */
title: {
type: String,
- default: '',
+ default: '选择时间',
},
+ /** 是否使用弹出层包裹 */
+ usePopup: Boolean,
/** 选中值 */
value: {
type: [String, Number] as PropType,
+ default: undefined,
},
modelValue: {
type: [String, Number] as PropType,
+ default: undefined,
},
/** 选中值，非受控属性 */
defaultValue: {
type: [String, Number] as PropType,
},
+ /** 是否显示 */
+ visible: Boolean,
/** 取消按钮点击时触发 */
onCancel: Function as PropType,
/** value改变时触发 */
onChange: Function as PropType,
+ /** 关闭时触发 */
+ onClose: Function as PropType,
/** 确认按钮点击时触发 */
onConfirm: Function as PropType,
/** 选中值发生变化时触发 */
diff --git a/src/date-time-picker/shared.ts b/src/date-time-picker/shared.ts
index a1094f322..f83d7cced 100644
--- a/src/date-time-picker/shared.ts
+++ b/src/date-time-picker/shared.ts
@@ -1,6 +1,7 @@
import { isArray } from 'lodash-es';
+import type { TimeModeValues } from './type';
-export const getMeaningColumn = (mode: string | string[]) => {
+export const getMeaningColumn = (mode: string | string[]): Array => {
const arr = ['year', 'month', 'date', 'hour', 'minute', 'second'];
if (isArray(mode)) {
@@ -18,10 +19,10 @@ export const getMeaningColumn = (mode: string | string[]) => {
ans.push(...arr.slice(3, cutIndex + 1));
}
}
- return ans;
+ return ans as TimeModeValues[];
}
const cutIndex = arr.indexOf(mode);
- return arr.slice(0, cutIndex + 1);
+ return arr.slice(0, cutIndex + 1) as TimeModeValues[];
};
diff --git a/src/date-time-picker/type.ts b/src/date-time-picker/type.ts
index b9dfa08af..1a509b4f4 100644
--- a/src/date-time-picker/type.ts
+++ b/src/date-time-picker/type.ts
@@ -4,9 +4,15 @@
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
+import { TriggerSource } from '../picker';
import { TNode } from '../common';
export interface TdDateTimePickerProps {
+ /**
+ * 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible
+ * @default false
+ */
+ autoClose?: boolean;
/**
* 取消按钮文字
* @default 取消
@@ -21,11 +27,23 @@ export interface TdDateTimePickerProps {
* 选择器的最大可选时间，默认为当前时间+10年
*/
end?: string | number;
+ /**
+ * 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)
+ */
+ filter?: (type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn;
+ /**
+ * 底部内容
+ */
+ footer?: TNode;
/**
* 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format)
* @default 'YYYY-MM-DD HH:mm:ss'
*/
format?: string;
+ /**
+ * 顶部内容
+ */
+ header?: TNode;
/**
* year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒
* @default 'date'
@@ -44,11 +62,20 @@ export interface TdDateTimePickerProps {
* 选择器的最小可选时间，默认为当前时间-10年
*/
start?: string | number;
+ /**
+ * 时间间隔步数，示例：`{ minute: 5 }`
+ */
+ steps?: Record;
/**
* 标题
* @default '选择时间'
*/
title?: string;
+ /**
+ * 是否使用弹出层包裹
+ * @default false
+ */
+ usePopup?: boolean;
/**
* 选中值
*/
@@ -61,6 +88,11 @@ export interface TdDateTimePickerProps {
* 选中值
*/
modelValue?: DateValue;
+ /**
+ * 是否显示
+ * @default false
+ */
+ visible?: boolean;
/**
* 取消按钮点击时触发
*/
@@ -69,6 +101,10 @@ export interface TdDateTimePickerProps {
* value改变时触发
*/
onChange?: (value: DateValue) => void;
+ /**
+ * 关闭时触发
+ */
+ onClose?: (trigger: TriggerSource) => void;
/**
* 确认按钮点击时触发
*/
@@ -79,6 +115,13 @@ export interface TdDateTimePickerProps {
onPick?: (value: DateValue) => void;
}
+export type DateTimePickerColumn = DateTimePickerColumnItem[];
+
+export interface DateTimePickerColumnItem {
+ label: string;
+ value: string;
+}
+
export type DateTimePickerMode = TimeModeValues | Array;
export type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index 30f3ff5cd..52c7fa323 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -801,6 +801,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -2579,6 +2580,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -4216,6 +4218,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index af6d19994..69ceaaa09 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -145,6 +145,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -356,6 +357,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -532,6 +534,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -716,6 +719,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -1010,6 +1014,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -1186,6 +1191,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -1332,6 +1338,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -1536,6 +1543,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
@@ -1774,6 +1782,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
class="t-picker__indicator"
/>
+
diff --git a/src/picker/picker.en-US.md b/src/picker/picker.en-US.md
index ef17fcb2b..432cb01e7 100644
--- a/src/picker/picker.en-US.md
+++ b/src/picker/picker.en-US.md
@@ -6,17 +6,22 @@
name | type | default | description | required
-- | -- | -- | -- | --
+autoClose | Boolean | true | \- | N
cancelBtn | String / Boolean | true | Typescript：`boolean \| string` | N
columns | Array / Function | [] | required。Typescript：`PickerColumn \| Array \| ((item: Array) => Array)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | Y
confirmBtn | String / Boolean | true | Typescript：`boolean \| string` | N
+footer | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
header | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
option | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
renderLabel | Function | - | Typescript：`(item: PickerColumnItem) => string` | N
title | String | '' | \- | N
+usePopup | Boolean | false | \- | N
value | Array | - | `v-model` and `v-model:value` is supported。Typescript：`Array` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
defaultValue | Array | - | uncontrolled property。Typescript：`Array` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
+visible | Boolean | false | \- | N
onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N
onChange | Function | | Typescript：`(value: Array, context: { columns: Array, e: MouseEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。
`interface PickerContext{ column: number,index: number }`
| N
+onClose | Function | | Typescript：`(trigger: TriggerSource) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。
`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`
| N
onConfirm | Function | | Typescript：`(value: Array, context: { index: number[], e: MouseEvent, label: string[] }) => void`
| N
onPick | Function | | Typescript：`(value: Array,context: PickerContext) => void`
| N
@@ -26,6 +31,7 @@ name | params | description
-- | -- | --
cancel | `(context: { e: MouseEvent })` | \-
change | `(value: Array, context: { columns: Array, e: MouseEvent }) ` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。
`interface PickerContext{ column: number,index: number }`
+close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。
`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`
confirm | `(value: Array, context: { index: number[], e: MouseEvent, label: string[] })` | \-
pick | `(value: Array,context: PickerContext)` | \-
diff --git a/src/picker/picker.md b/src/picker/picker.md
index 97fe19b95..3c57ea637 100644
--- a/src/picker/picker.md
+++ b/src/picker/picker.md
@@ -7,17 +7,22 @@
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
+autoClose | Boolean | true | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
cancelBtn | String / Boolean | true | 取消按钮文字。TS 类型：`boolean \| string` | N
columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型：`PickerColumn \| Array \| ((item: Array) => Array)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | Y
confirmBtn | String / Boolean | true | 确定按钮文字。TS 类型：`boolean \| string` | N
+footer | Slot / Function | - | 底部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
header | Slot / Function | - | 自定义头部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
option | Slot / Function | - | 自定义选项内容。参数为 `option: PickerColumnItem, index: number`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
renderLabel | Function | - | 自定义label。TS 类型：`(item: PickerColumnItem) => string` | N
title | String | '' | 标题 | N
+usePopup | Boolean | false | 是否使用弹出层包裹 | N
value | Array | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`Array` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
defaultValue | Array | - | 选中值。非受控属性。TS 类型：`Array` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
+visible | Boolean | false | 是否显示 | N
onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击取消按钮时触发 | N
onChange | Function | | TS 类型：`(value: Array, context: { columns: Array, e: MouseEvent }) => void`
选中变化时候触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。
`interface PickerContext{ column: number,index: number }`
| N
+onClose | Function | | TS 类型：`(trigger: TriggerSource) => void`
关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。
`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`
| N
onConfirm | Function | | TS 类型：`(value: Array, context: { index: number[], e: MouseEvent, label: string[] }) => void`
点击确认按钮时触发 | N
onPick | Function | | TS 类型：`(value: Array,context: PickerContext) => void`
任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标 | N
@@ -27,6 +32,7 @@ onPick | Function | | TS 类型：`(value: Array,context: PickerCo
-- | -- | --
cancel | `(context: { e: MouseEvent })` | 点击取消按钮时触发
change | `(value: Array, context: { columns: Array, e: MouseEvent }) ` | 选中变化时候触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。
`interface PickerContext{ column: number,index: number }`
+close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。
`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`
confirm | `(value: Array, context: { index: number[], e: MouseEvent, label: string[] })` | 点击确认按钮时触发
pick | `(value: Array,context: PickerContext)` | 任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标
diff --git a/src/picker/picker.tsx b/src/picker/picker.tsx
index e733a8204..2fe18145d 100644
--- a/src/picker/picker.tsx
+++ b/src/picker/picker.tsx
@@ -6,6 +6,7 @@ import { PickerValue, PickerColumn, PickerColumnItem } from './type';
import { useVModel } from '../shared';
import { useTNodeJSX } from '../hooks/tnode';
import PickerItem from './picker-item';
+import { Popup as TPopup } from '../popup';
import { getPickerColumns } from './utils';
import { usePrefixClass, useConfig } from '../hooks/useClass';
@@ -18,7 +19,7 @@ const getIndexFromColumns = (column: PickerColumn, value: PickerValue) => {
export default defineComponent({
name: `${prefix}-picker`,
- components: { PickerItem },
+ components: { PickerItem, TPopup },
props: PickerProps,
emits: ['change', 'cancel', 'pick', 'update:modelValue', 'update:value'],
setup(props, { slots }) {
@@ -28,6 +29,13 @@ export default defineComponent({
const { value, modelValue } = toRefs(props);
const [pickerValue = ref([]), setPickerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+ const innerVisible = ref(props.visible);
+ watch(
+ () => props.visible,
+ (value) => {
+ innerVisible.value = value;
+ },
+ );
const getDefaultText = (prop: string | boolean, defaultText: string): string => {
if (isString(prop)) return prop;
@@ -64,13 +72,25 @@ export default defineComponent({
const value = target.map((item: PickerColumnItem) => item.value);
setPickerValue(value);
props.onConfirm?.(value, { index: curIndexArray, label, e });
+
+ if (props.autoClose) {
+ innerVisible.value = false;
+ props.onClose?.('confirm-btn');
+ }
};
+
const handleCancel = (e: MouseEvent) => {
pickerItemInstanceArray.value.forEach((item: any, index: number) => {
item?.setIndex(curIndexArray[index]);
});
props.onCancel?.({ e });
+
+ if (props.autoClose) {
+ innerVisible.value = false;
+ props.onClose?.('cancel-btn');
+ }
};
+
const handlePick = (context: any, column: number) => {
const { index } = context;
@@ -80,6 +100,11 @@ export default defineComponent({
props.onPick?.(curValueArray.value, { index, column });
};
+ const onClose = () => {
+ innerVisible.value = false;
+ props.onClose?.('overlay');
+ };
+
watch(pickerValue, () => {
curValueArray.value = pickerValue.value.map((item: PickerValue) => item);
});
@@ -94,7 +119,9 @@ export default defineComponent({
return () => {
const header = renderTNodeJSX('header');
- return (
+ const footer = renderTNodeJSX('footer');
+
+ const inner = (
);
+
+ if (props.usePopup) {
+ return (
+
+ {inner}
+
+ );
+ }
+ return inner;
};
},
});
diff --git a/src/picker/props.ts b/src/picker/props.ts
index 1d7276aac..92affbde7 100644
--- a/src/picker/props.ts
+++ b/src/picker/props.ts
@@ -8,6 +8,11 @@ import { TdPickerProps } from './type';
import { PropType } from 'vue';
export default {
+ /** 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible */
+ autoClose: {
+ type: Boolean,
+ default: true,
+ },
/** 取消按钮文字 */
cancelBtn: {
type: [String, Boolean] as PropType,
@@ -24,6 +29,10 @@ export default {
type: [String, Boolean] as PropType,
default: true,
},
+ /** 底部内容 */
+ footer: {
+ type: Function as PropType,
+ },
/** 自定义头部内容 */
header: {
type: Function as PropType,
@@ -41,6 +50,8 @@ export default {
type: String,
default: '',
},
+ /** 是否使用弹出层包裹 */
+ usePopup: Boolean,
/** 选中值 */
value: {
type: Array as PropType,
@@ -54,10 +65,14 @@ export default {
defaultValue: {
type: Array as PropType,
},
+ /** 是否显示 */
+ visible: Boolean,
/** 点击取消按钮时触发 */
onCancel: Function as PropType,
/** 选中变化时候触发 */
onChange: Function as PropType,
+ /** 关闭时触发 */
+ onClose: Function as PropType,
/** 点击确认按钮时触发 */
onConfirm: Function as PropType,
/** 任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标 */
diff --git a/src/picker/type.ts b/src/picker/type.ts
index 87b2eb865..14571face 100644
--- a/src/picker/type.ts
+++ b/src/picker/type.ts
@@ -7,6 +7,11 @@
import { TNode } from '../common';
export interface TdPickerProps {
+ /**
+ * 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible
+ * @default true
+ */
+ autoClose?: boolean;
/**
* 取消按钮文字
* @default true
@@ -22,6 +27,10 @@ export interface TdPickerProps {
* @default true
*/
confirmBtn?: boolean | string;
+ /**
+ * 底部内容
+ */
+ footer?: TNode;
/**
* 自定义头部内容
*/
@@ -39,6 +48,11 @@ export interface TdPickerProps {
* @default ''
*/
title?: string;
+ /**
+ * 是否使用弹出层包裹
+ * @default false
+ */
+ usePopup?: boolean;
/**
* 选中值
*/
@@ -51,6 +65,11 @@ export interface TdPickerProps {
* 选中值
*/
modelValue?: Array;
+ /**
+ * 是否显示
+ * @default false
+ */
+ visible?: boolean;
/**
* 点击取消按钮时触发
* @default ''
@@ -61,6 +80,10 @@ export interface TdPickerProps {
* @default ''
*/
onChange?: (value: Array, context: { columns: Array; e: MouseEvent }) => void;
+ /**
+ * 关闭时触发
+ */
+ onClose?: (trigger: TriggerSource) => void;
/**
* 点击确认按钮时触发
* @default ''
@@ -86,3 +109,5 @@ export interface PickerContext {
column: number;
index: number;
}
+
+export type TriggerSource = 'overlay' | 'cancel-btn' | 'confirm-btn';