first commit
This commit is contained in:
77
uni_modules/tdesign-uniapp/components/picker/README.en-US.md
Normal file
77
uni_modules/tdesign-uniapp/components/picker/README.en-US.md
Normal 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 | -
|
||||
112
uni_modules/tdesign-uniapp/components/picker/README.md
Normal file
112
uni_modules/tdesign-uniapp/components/picker/README.md
Normal 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 | -
|
||||
71
uni_modules/tdesign-uniapp/components/picker/picker.css
Normal file
71
uni_modules/tdesign-uniapp/components/picker/picker.css
Normal 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);
|
||||
}
|
||||
315
uni_modules/tdesign-uniapp/components/picker/picker.vue
Normal file
315
uni_modules/tdesign-uniapp/components/picker/picker.vue
Normal 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>
|
||||
95
uni_modules/tdesign-uniapp/components/picker/props.ts
Normal file
95
uni_modules/tdesign-uniapp/components/picker/props.ts
Normal 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: () => ({}),
|
||||
},
|
||||
};
|
||||
114
uni_modules/tdesign-uniapp/components/picker/type.ts
Normal file
114
uni_modules/tdesign-uniapp/components/picker/type.ts
Normal 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';
|
||||
Reference in New Issue
Block a user