All files / src/components/u-date-picker.vue range-input.vue

52% Statements 13/25
14.28% Branches 2/14
14.28% Functions 1/7
54.16% Lines 13/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184      7x   7x     7x                                                                                                                                                                                                                                                                                                                                                              
<template>
    <div :class="$style.root" :focus="focused" :color="color">
        <u-input
            :width="leftWidth"
            height="full"
            :class="$style.input"
            type="text"
            :value="leftValue"
            ref="leftInput"
            :prefix="preIcon ? preIcon : undefined"
            :autofocus="autofocus"
            :readonly="readonly"
            :disabled="disabled"
            :placeholder="placeholder"
            @click.stop="onLeftClick"
            @focus="onFocus"
            @blur="onBlur"
            @update:value="onUpdateLeftValue"
            @blur:value="onBlurLeftValue">
            <template #prefix>
                <i-ico v-if="preIcon" :name="preIcon" :class="[$style.preIcon]" notext slot="prefix"></i-ico>
            </template>
        </u-input>
        <span :class="$style.toIcon"></span>
        <u-input
            :width="rightWidth"
            height="full"
            :class="$style.input"
            type="text"
            :value="rightValue"
            ref="rightInput"
            :suffix="suffixIcon ? suffixIcon : undefined"
            :autofocus="autofocus"
            :readonly="readonly"
            :disabled="disabled"
            :placeholder="rightPlaceholder"
            :clearable="clearable"
            @click.stop="onRightClick"
            @focus="onFocus"
            @blur="onBlur"
            @clear="onClear"
            @update:value="onUpdateRightValue"
            @blur:value="onBlurRightValue">
            <template #suffix>
                <i-ico v-if="suffixIcon" :name="suffixIcon" :class="[$style.suffixIcon]" notext></i-ico>
            </template>
        </u-input>
    </div>
</template>
 
<script>
import i18nMixin from '../../mixins/i18n';
export default {
    name: 'u-range-input',
    mixins: [i18nMixin('u-date-picker')],
    props: {
        leftValue: { type: String },
        rightValue: { type: String },
        leftWidth: { type: String, default: 'full' },
        rightWidth: { type: String, default: 'full' },
        preIcon: {
            type: String,
            default: 'calendar',
        },
        suffixIcon: {
            type: String,
        },
        disabled: { type: Boolean, default: false },
        autofocus: { type: Boolean, default: false },
        readonly: { type: Boolean, default: false },
        placeholder: {
            type: String,
            default() {
                return this.$tt('selectDateText');
            },
        },
        placeholderRight: {
            type: String,
        },
        clearable: { type: Boolean, default: false },
        color: { type: String },
    },
    data() {
        return {
            focused: false,
        };
    },
    computed: {
        rightPlaceholder() {
            return this.placeholderRight || this.placeholder;
        },
    },
    methods: {
        onLeftClick(event) {
            this.$emit('left-click', event);
        },
        onRightClick(event) {
            this.$emit('right-click', event);
        },
        onUpdateLeftValue(value) {
            this.$emit('update:value', {
                leftValue: value,
                rightValue: this.rightValue,
            });
        },
        onUpdateRightValue(value) {
            this.$emit('update:value', {
                leftValue: this.leftValue,
                rightValue: value,
            });
        },
        onFocus(e) {
            this.focused = true;
            this.$emit('focus', e);
        },
        onBlur(e) {
            this.focused = false;
            this.$emit('blur', e);
        },
        onBlurLeftValue(value) {
            this.$emit('blur:value', { leftValue: value, rightValue: this.rightValue });
        },
        onBlurRightValue(value) {
            this.$emit('blur:value', { leftValue: this.leftValue, rightValue: value });
        },
        onClear() {
            this.$emit('clear');
            this.$nextTick(() => {
                // 右边被清除的时候,左边也要清除
                this.$refs.leftInput.clear();
            });
        },
        updateCurrentValue({ leftValue, rightValue }) {
            if (leftValue) {
                this.$refs.leftInput.updateCurrentValue(leftValue);
            }
            if (rightValue) {
                this.$refs.rightInput.updateCurrentValue(rightValue);
            }
        },
    },
};
</script>
<style module>
.root {
    display: flex;
}
 
.root[focus] {
    border-color: var(--input-border-color-focus);
    box-shadow: var(--input-box-shadow-focus);
}
 
.root[color="error"] {
    border-color: var(--input-border-color-error);
}
 
.input {
    border: none!important;
    box-shadow: none!important;
}
 
.input input:focus {
    outline: none!important;
}
 
.preIcon {
    left: 12px;
    color: var(--datepicker-input-pre-icon-color);
}
 
.toIcon::before {
    icon-font: url('./assets/to.svg');
    color: var(--datepicker-input-pre-icon-color);
    font-size: 16px;
    line-height: var(--datetime-input-height);
}
 
.suffixIcon {
    right: 12px;
    color: var(--datepicker-input-after-icon-color);
}
</style>