From c6d0e88d664f4427fab388bef83af93784bda221 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 25 Jul 2022 16:39:39 +0800
Subject: [PATCH] 日期选择器组件，支持清除
---
forms/datePicker/cDatePicker.scss | 16 ++++++++++++++++
forms/datePicker/CDatePicker.vue | 38 ++++++++++++++++++++++++++++++++++----
2 files changed, 50 insertions(+), 4 deletions(-)
diff --git a/forms/datePicker/CDatePicker.vue b/forms/datePicker/CDatePicker.vue
index 4f3d64c..faa4d0a 100644
--- a/forms/datePicker/CDatePicker.vue
+++ b/forms/datePicker/CDatePicker.vue
@@ -23,9 +23,14 @@
:placeholder="placeholder"
>
<view
- v-show="!readOnly"
+ v-show="!readOnly && !showClear"
class="at-icon at-icon-chevron-right"
/>
+ <view
+ v-show="showClear"
+ class="at-icon at-icon-close"
+ @tap.stop="evt => handleClear()"
+ ></view>
</AtInput>
</CDateRangeAction>
<CDateTimeAction
@@ -43,9 +48,14 @@
:placeholder="placeholder"
>
<view
- v-show="!readOnly"
+ v-show="!readOnly && !showClear"
class="at-icon at-icon-chevron-right"
/>
+ <view
+ v-show="showClear"
+ class="at-icon at-icon-close"
+ @tap.stop="evt => handleClear()"
+ ></view>
</AtInput>
</CDateTimeAction>
<view v-else-if="mode==='date'">
@@ -65,9 +75,14 @@
:placeholder="placeholder"
>
<view
- v-show="!readOnly"
+ v-show="!readOnly && !showClear"
class="at-icon at-icon-chevron-right"
/>
+ <view
+ v-show="showClear"
+ class="at-icon at-icon-close"
+ @tap.stop="evt => handleClear()"
+ ></view>
</AtInput>
</picker>
</view>
@@ -108,6 +123,11 @@
type: Boolean,
default: false,
},
+ // 允许清除
+ allowClear: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
const year = new Date().getFullYear();
@@ -116,11 +136,21 @@
pickerEnd: year + 30 + '-12-31',
};
},
- computed: {},
+ computed: {
+ showClear() {
+ if (!this.allowClear) {
+ return false;
+ }
+ return !!this.itemRes.formData[this.itemRes.name];
+ },
+ },
methods: {
handleChange(val) {
this.itemRes.onChange(val);
},
+ handleClear() {
+ this.itemRes.onChange('');
+ },
},
mounted() {},
};
diff --git a/forms/datePicker/cDatePicker.scss b/forms/datePicker/cDatePicker.scss
index d79be35..0eb8c1b 100644
--- a/forms/datePicker/cDatePicker.scss
+++ b/forms/datePicker/cDatePicker.scss
@@ -25,6 +25,22 @@
font-size: 48px;
color: #ccc;
}
+ .at-icon-close {
+ padding: 8px;
+ margin: 4px;
+ color: #fff;
+ font-size: 24px;
+ line-height: 24px;
+ background-color: #ccc;
+ border-radius: 50%;
+ &::after {
+ @include position(absolute, -24px n n 0);
+ width: 90px;
+ height: 90px;
+ background-color: rgba(#000, 0);
+ content: "";
+ }
+ }
}
.at-input__icon {
display: none;
--
Gitblit v1.9.1