白色主题
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
auto-close | Boolean | true | `0.34.0` | N
|
||||
confirm-btn | String / Object / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
first-day-of-week | Number | 0 | \- | N
|
||||
@@ -23,5 +24,6 @@ visible | Boolean | false | \- | N
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(value: timestamp)` | `0.28.0`
|
||||
close | `(trigger: CalendarTrigger)` | `0.34.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
|
||||
confirm | `(value: timestamp)` | \-
|
||||
select | `(value: timestamp)` | `0.28.0`
|
||||
|
||||
@@ -57,6 +57,7 @@ isComponent: true
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
auto-close | Boolean | true | `0.34.0`。自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible | N
|
||||
confirm-btn | String / Object / Slot | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
first-day-of-week | Number | 0 | 第一天从星期几开始，默认 0 = 周日 | N
|
||||
@@ -75,5 +76,6 @@ visible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效 |
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(value: timestamp)` | `0.28.0`。不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple）
|
||||
close | `(trigger: CalendarTrigger)` | `0.34.0`。关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
|
||||
confirm | `(value: timestamp)` | 点击确认按钮时触发
|
||||
select | `(value: timestamp)` | `0.28.0`。点击日期时触发
|
||||
|
||||
@@ -33,6 +33,8 @@ export default class Calendar extends SuperComponent {
|
||||
initialValue(): void;
|
||||
scrollIntoView(): void;
|
||||
calcMonths(): void;
|
||||
close(trigger: any): void;
|
||||
onVisibleChange(): void;
|
||||
handleClose(): void;
|
||||
handleSelect(e: any): void;
|
||||
onTplButtonTap(): void;
|
||||
|
||||
@@ -24,7 +24,7 @@ let Calendar = class Calendar extends SuperComponent {
|
||||
classPrefix: name,
|
||||
months: [],
|
||||
scrollIntoView: '',
|
||||
innerConfirmBtn: { content: '确认' },
|
||||
innerConfirmBtn: { content: '确定' },
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
@@ -111,8 +111,17 @@ let Calendar = class Calendar extends SuperComponent {
|
||||
months,
|
||||
});
|
||||
},
|
||||
close(trigger) {
|
||||
if (this.data.autoClose) {
|
||||
this.setData({ visible: false });
|
||||
}
|
||||
this.triggerEvent('close', { trigger });
|
||||
},
|
||||
onVisibleChange() {
|
||||
this.close('overlay');
|
||||
},
|
||||
handleClose() {
|
||||
this.setData({ visible: false });
|
||||
this.close('close-btn');
|
||||
},
|
||||
handleSelect(e) {
|
||||
const { date, year, month } = e.currentTarget.dataset;
|
||||
@@ -132,6 +141,7 @@ let Calendar = class Calendar extends SuperComponent {
|
||||
onTplButtonTap() {
|
||||
const rawValue = this.base.getTrimValue();
|
||||
const value = this.toTime(rawValue);
|
||||
this.close('confirm-btn');
|
||||
this._trigger('confirm', { value });
|
||||
},
|
||||
toTime(val) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<wxs src="./calendar.wxs" module="this" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<t-popup wx:if="{{usePopup}}" visible="{{visible}}" bind:visible-change="handleClose" placement="bottom">
|
||||
<t-popup wx:if="{{usePopup}}" visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom">
|
||||
<include src="./template.wxml" />
|
||||
</t-popup>
|
||||
<include wx:else src="./template.wxml" />
|
||||
|
||||
@@ -30,6 +30,8 @@
|
||||
z-index: 9999;
|
||||
background: var(--td-calendar-bg-color, var(--td-bg-color-block, #fff));
|
||||
overflow-x: hidden;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.t-calendar--popup {
|
||||
border-top-left-radius: var(--td-calendar-radius, 24rpx);
|
||||
@@ -100,8 +102,11 @@
|
||||
height: 120rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 16rpx;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.t-calendar__dates-item-prefix,
|
||||
.t-calendar__dates-item-suffix {
|
||||
@@ -177,6 +182,5 @@
|
||||
cursor: default;
|
||||
}
|
||||
.t-calendar__footer {
|
||||
border-top: 1px solid var(--td-border-color, #e7e7e7);
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
const props = {
|
||||
autoClose: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
confirmBtn: {
|
||||
type: null,
|
||||
value: '',
|
||||
},
|
||||
customStyle: {
|
||||
style: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<import src="../common/template/button.wxml" />
|
||||
|
||||
<view class="{{_.cls(classPrefix, [['popup', usePopup]])}}" style="{{customStyle}}">
|
||||
<view class="{{_.cls(classPrefix, [['popup', usePopup]])}}" style="{{style}}">
|
||||
<view class="{{classPrefix}}__title" tabindex="0">
|
||||
<slot wx:if="{{title === 'slot'}}" name="title" />
|
||||
<text wx:else>{{ title || '请选择日期' }}</text>
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import { ButtonProps } from '../button/index';
|
||||
export interface TdCalendarProps {
|
||||
autoClose?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmBtn?: {
|
||||
type: null;
|
||||
value?: string | ButtonProps | null;
|
||||
};
|
||||
customStyle?: {
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user