日期选择器组件，支持清除

Tevin

2022-07-25 c6d0e88d664f4427fab388bef83af93784bda221

日期选择器组件，支持清除

 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() {},
};

 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;