Skip to content

Commit

Permalink
feat: picker datetime-picker cascader-picker支持点击遮罩关闭
Browse files Browse the repository at this point in the history
  • Loading branch information
@yx376642000
yx376642000 committed Jul 26, 2023
1 parent 344a493 commit 69acd57
Show file tree
Hide file tree
Showing 18 changed files with 117 additions and 76 deletions.
17 changes: 9 additions & 8 deletions packages/quarkd/src/cascadepicker/doc-react.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,14 +179,15 @@ export default () => {

### Props

| Attribute | Description | Type | Default |
| ------------ | ------------------------------------------------------- | --------------------------------------------------- | --------- |
| open | Whether to show Picker | `boolean ` | `require` |
| title | Title | `string ` |
| bottomhidden | Whether to show bottom button (use with custom header） | `boolean` | `false` |
| onClose | Emitted when click mask or cancel button. | `() => void` |
| onConfirm | Emitted when click confirm button. | `（e: {detail:{value: SelectedColumn[]}}）=> void` |
| onChange | Emitted when current option changed. | `（e: {detail:{value: SelectedColumn[]}}）=> void ` |
| Attribute | Description | Type | Default |
| --------------- | ------------------------------------------------------- | --------------------------------------------------- | --------- |
| open | Whether to show Picker | `boolean ` | `require` |
| title | Title | `string ` |
| bottomhidden | Whether to show bottom button (use with custom header） | `boolean` | `false` |
| forbidmaskclick | Whether forbid mask click | `boolean` | `false` |
| onClose | Emitted when click mask or cancel button. | `() => void` |
| onConfirm | Emitted when click confirm button. | `（e: {detail:{value: SelectedColumn[]}}）=> void` |
| onChange | Emitted when current option changed. | `（e: {detail:{value: SelectedColumn[]}}）=> void ` |

### Slot

Expand Down
17 changes: 9 additions & 8 deletions packages/quarkd/src/cascadepicker/doc-react.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,14 +173,15 @@ export default () => {

### Props

| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------------------------ | --------------------------------------------------- | --------- |
| open | picker 是否显示 | `boolean` | `require` |
| title | 标题 | `string` | |
| bottomhidden | 是否隐藏底部按钮（通常配合自定义头部使用） | `boolean` | `false` |
| onClose | 点击遮罩或者取消按钮 | `() => void ` | `require` |
| onConfirm | 确定按钮点击回调 | `（e: {detail:{value: SelectedColumn[]}}）=> void ` | `require` |
| onChange | picker 改变回调 | `（e: {detail:{value: SelectedColumn[]}}）=> void` | |
| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ------------------------------------------ | --------------------------------------------------- | --------- |
| open | picker 是否显示 | `boolean` | `require` |
| title | 标题 | `string` | |
| bottomhidden | 是否隐藏底部按钮（通常配合自定义头部使用） | `boolean` | `false` |
| forbidmaskclick | 是否禁止遮罩层点击 | `boolean` | `false` |
| onClose | 点击遮罩或者取消按钮 | `() => void ` | `require` |
| onConfirm | 确定按钮点击回调 | `（e: {detail:{value: SelectedColumn[]}}）=> void ` | `require` |
| onChange | picker 改变回调 | `（e: {detail:{value: SelectedColumn[]}}）=> void` | |

### Slot

Expand Down
11 changes: 6 additions & 5 deletions packages/quarkd/src/cascadepicker/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,11 +223,12 @@ export default {

### Props

| Attribute | Description | Type | Default |
| ------------ | ------------------------------------------------------- | ---------- | --------- |
| open | Whether to show Picker | `boolean ` | `require` |
| title | Title | `string ` |
| bottomhidden | Whether to show bottom button (use with custom header） | `boolean` | `false` |
| Attribute | Description | Type | Default |
| --------------- | ------------------------------------------------------- | ---------- | --------- |
| open | Whether to show Picker | `boolean ` | `require` |
| title | Title | `string ` |
| bottomhidden | Whether to show bottom button (use with custom header） | `boolean` | `false` |
| forbidmaskclick | Whether forbid mask click | `boolean` | `false` |

### Events

Expand Down
11 changes: 6 additions & 5 deletions packages/quarkd/src/cascadepicker/doc.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,11 +198,12 @@ export default {

### Props

| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------------------------ | --------- | --------- |
| open | picker 是否显示 | `boolean` | `require` |
| title | 标题 | `string` | |
| bottomhidden | 是否隐藏底部按钮（通常配合自定义头部使用） | `boolean` | `false` |
| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ------------------------------------------ | --------- | --------- |
| open | picker 是否显示 | `boolean` | `require` |
| title | 标题 | `string` | |
| bottomhidden | 是否隐藏底部按钮（通常配合自定义头部使用） | `boolean` | `false` |
| forbidmaskclick | 是否禁止遮罩层点击 | `boolean` | `false` |

### Events

Expand Down
8 changes: 6 additions & 2 deletions packages/quarkd/src/cascadepicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface Props {
name?: string;
title?: string;
bottomhidden?: boolean;
forbidmaskclick?: boolean;
}

export interface CustomEvent {
Expand All @@ -51,6 +52,9 @@ class QuarkCascadePicker extends QuarkElement {
@property({ type: Boolean })
bottomhidden = false;

@property({ type: Boolean })
forbidmaskclick = false;

@state()
pickerData: string[][] = [];

Expand Down Expand Up @@ -164,7 +168,6 @@ class QuarkCascadePicker extends QuarkElement {
}

popupClose = () => {
debugger;
this.restorePosition();
this.$emit("close");
};
Expand Down Expand Up @@ -222,7 +225,8 @@ class QuarkCascadePicker extends QuarkElement {
position="bottom"
safearea
round
onclosed={this.popupClose}
forbidmaskclick={this.forbidmaskclick}
onclose={this.popupClose}
>
<div class="quark-cascade-picker">
<div class="quark-cascade-picker-header">
Expand Down
4 changes: 4 additions & 0 deletions packages/quarkd/src/datetimepicker/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ class QuarkDatePicker extends QuarkElement {
@property({ type: String })
cancelbuttontext = "";

@property({ type: Boolean })
forbidmaskclick = false;

pickerRef: any = createRef();

originColumns: { defaultIndex: number; type: string; values: string[] }[] =
Expand Down Expand Up @@ -284,6 +287,7 @@ class QuarkDatePicker extends QuarkElement {
title={this.title}
bottomhidden={this.showtoolbar}
open={this.open}
forbidmaskclick={this.forbidmaskclick}
onclose={this.onClose}
onchange={this.onChange}
onconfirm={this.onConfirm}
Expand Down
4 changes: 4 additions & 0 deletions packages/quarkd/src/datetimepicker/TimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ class QuarkTimePicker extends QuarkElement {
@property({ type: String })
cancelbuttontext = "";

@property({ type: Boolean })
forbidmaskclick = false;

pickerRef: any = createRef();
originColumns: { defaultIndex: number; type: string; values: string[] }[] =
[];
Expand Down Expand Up @@ -165,6 +168,7 @@ class QuarkTimePicker extends QuarkElement {
title={this.title}
bottomhidden={this.showtoolbar}
open={this.open}
forbidmaskclick={this.forbidmaskclick}
onclose={this.onClose}
onchange={this.onChange}
onconfirm={this.confirm}
Expand Down
1 change: 1 addition & 0 deletions packages/quarkd/src/datetimepicker/doc-react.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,7 @@ export default () => {
| showtoolbar | Whether to show toolbar | `boolean` | `false` |
| confirmbuttontext | Text of confirm button | `string` | `Confirm` |
| cancelbuttontext | Text of cancel button | `string` | `Cancel` |
| forbidmaskclick | Whether forbid mask click | `boolean` | `false` |
| onClose | Emitted when click mask or cancel button. | `() => void ` |
| onConfirm | Emitted when click confirm button. | `e: {detail:{value: Date \| string }}）=> void` |
| onChange | Emitted when current option changed. | `e: {detail:{value: Date \| string }}）=> void` |
Expand Down
1 change: 1 addition & 0 deletions packages/quarkd/src/datetimepicker/doc-react.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,7 @@ export default () => {
| showtoolbar | 是否显示顶部栏 | `boolean` | `false` |
| confirmbuttontext | 顶部栏确认按钮文字 | `string` | `确认` |
| cancelbuttontext | 顶部栏取消按钮文字 | `string` | `取消` |
| forbidmaskclick | 是否禁止遮罩层点击 | `boolean` | `false` |
| onClose | 点击遮罩或者取消按钮 | `() => void ` |
| onConfirm | 确定按钮点击回调 | `（e: {detail:{value: Date \| string }}）=> void ` |
| onChange | picker 改变回调 | `（e: {detail:{value: Date \| string }}）=> void` |
Expand Down
1 change: 1 addition & 0 deletions packages/quarkd/src/datetimepicker/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,7 @@ export default {
| showtoolbar | Whether to show toolbar | `boolean` | `false` |
| confirmbuttontext | Text of confirm button | `string` | `Confirm` |
| cancelbuttontext | Text of cancel button | `string` | `Cancel` |
| forbidmaskclick | Whether forbid mask click | `boolean` | `false` |

### DatePicker Props

Expand Down
1 change: 1 addition & 0 deletions packages/quarkd/src/datetimepicker/doc.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,7 @@ export default {
| showtoolbar | 是否显示顶部栏 | `boolean` | `false` |
| confirmbuttontext | 顶部栏确认按钮文字 | `string` | `确认` |
| cancelbuttontext | 顶部栏取消按钮文字 | `string` | `取消` |
| forbidmaskclick | 是否禁止遮罩层点击 | `boolean` | `false` |

### DatePicker Props

Expand Down
6 changes: 6 additions & 0 deletions packages/quarkd/src/datetimepicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export interface Props {
showtoolbar?: boolean;
confirmbuttontext?: string;
cancelbuttontext?: string;
forbidmaskclick?: boolean;
}
export interface CustomEvent {
close: () => void;
Expand Down Expand Up @@ -85,6 +86,9 @@ class QuarkDatetimePicker extends QuarkElement {
@property({ type: String })
cancelbuttontext: string = Locale.current.cancel;

@property({ type: Boolean })
forbidmaskclick = false;

datePickerRef: any = createRef();
timePickerRef: any = createRef();

Expand Down Expand Up @@ -143,6 +147,7 @@ class QuarkDatetimePicker extends QuarkElement {
showtoolbar={this.showtoolbar}
confirmbuttontext={this.confirmbuttontext}
cancelbuttontext={this.cancelbuttontext}
forbidmaskclick={this.forbidmaskclick}
onclose={this.onClose}
onchange={this.onChange}
onconfirm={this.onConfirm}
Expand All @@ -161,6 +166,7 @@ class QuarkDatetimePicker extends QuarkElement {
showtoolbar={this.showtoolbar}
confirmbuttontext={this.confirmbuttontext}
cancelbuttontext={this.cancelbuttontext}
forbidmaskclick={this.forbidmaskclick}
onclose={this.onClose}
onchange={this.onChange}
onconfirm={this.onConfirm}
Expand Down
18 changes: 9 additions & 9 deletions packages/quarkd/src/picker/demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@
></quark-cell>
</quark-cell-group>
<quark-picker
ref="pickerRef"
:open="open"
@close="close(0)"
:title="translate('selectedTime')"
:confirmtext="translate('confirmText')"
@confirm="confirm"
ref="pickerRef"
@change="change"
@close="close(0)"
@confirm="confirm"
/>
<h2>{{ translate("head") }}</h2>
<quark-cell-group>
Expand All @@ -34,13 +34,13 @@
bottomhidden
>
<div slot="header" class="head-container">
<span class="cancel" @click="close(1)">{{
translate("custom.cancel")
}}</span>
<span class="cancel" @click="close(1)">
{{ translate("custom.cancel") }}
</span>
<span class="picker-title">{{ translate("custom.title") }}</span>
<span class="ensure" @click="customConfirm">{{
translate("custom.confirm")
}}</span>
<span class="ensure" @click="customConfirm">
{{ translate("custom.confirm") }}
</span>
</div>
</quark-picker>
</div>
Expand Down
19 changes: 10 additions & 9 deletions packages/quarkd/src/picker/doc-react.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,15 +128,16 @@ export default () => {

### Props

| Attribute | Description | Type | Default |
| ------------ | ------------------------------------------------------ | ------------------------------------------------ | ---------- |
| open | Whether to show picker | `boolean` | `require` |
| title | Title | `string` | - |
| confirmtext | Text of the ok button | `string` | `Confirm` |
| bottomhidden | Whether to show bottom button (use with custom header) | `boolean` | `false` |
| onClose | Emitted when click mask or cancel button. | `() => void` | `require ` |
| onConfirm | Emitted when click confirm button. | `（e: {detail:{value: SelectColumn[]}}）=> void` | `require` |
| onChange | Emitted when current option changed. | `（e: {detail:{value: SelectColumn[]}}）=> void` | - |
| Attribute | Description | Type | Default |
| --------------- | ------------------------------------------------------ | ------------------------------------------------ | ---------- |
| open | Whether to show picker | `boolean` | `require` |
| title | Title | `string` | - |
| confirmtext | Text of the ok button | `string` | `Confirm` |
| bottomhidden | Whether to show bottom button (use with custom header) | `boolean` | `false` |
| forbidmaskclick | Whether forbid mask click | `boolean` | `false` |
| onClose | Emitted when click mask or cancel button. | `() => void` | `require ` |
| onConfirm | Emitted when click confirm button. | `（e: {detail:{value: SelectColumn[]}}）=> void` | `require` |
| onChange | Emitted when current option changed. | `（e: {detail:{value: SelectColumn[]}}）=> void` | - |

### Slot

Expand Down
Loading

0 comments on commit 69acd57

Please sign in to comment.