app-number-range-picker.vue

<template>
    <div class="app-number-range-picker">
        <input-number
            :min="min"
            :max="!maxValue && maxValue != 0 ? Infinity : maxValue - 1"
            :size="size"
            :active-change="false"
            :value="minValue"
            :disabled="disabled"
            :readonly="readonly"
            :precision="precision"
            :placeholder="startPlaceholder"
            @on-focus="handleFocus"
            @on-blur="handleBlur"
            @on-change="(value) => {handleChange(value, 0)}">
        </input-number>
        <div class="app-number-range-picker__separator"> ~ </div>
        <input-number
            :min="minValue + 1"
            :max="max"
            :size="size"
            :active-change="false"
            :value="maxValue"
            :disabled="disabled"
            :readonly="readonly"
            :precision="precision"
            :placeholder="endPlaceholder"
            @on-focus="handleFocus"
            @on-blur="handleBlur"
            @on-change="(value) => {handleChange(value, 1)}">
        </input-number>
    </div>     
</template>

<script lang='ts'>
import { Component, Vue, Prop, Model, Emit } from 'vue-property-decorator';

@Component({})
export default class AppNumberRangePicker extends Vue {

    /**
     * 双向绑定表单项值
     *
     * @type {*}
     * @memberof AppDateRangePicker
     */

    @Model('change') public value: any;

    /**
     * 编辑项名称
     *
     * @type {string}
     * @memberof AppNumberRangePicker
     */
    @Prop() public name!: string;

    /**
     * 是否禁用
     * 
     * @type {boolean}
     * @memberof AppNumberRangePicker
     */
    @Prop({default: false}) public disabled!: boolean;

    /**
     * 只读模式
     * 
     * @type {boolean}
     */
    @Prop({default: false}) public readonly!: boolean;

    /**
     * 表单数据对象
     *
     * @type {*}
     * @memberof AppNumberRangePicker
     */
    @Prop() public data: any;

    /**
     * 精度
     *
     * @type {number}
     * @memberof AppNumberRangePicker
     */
    @Prop({ default: 0 }) public precision?: number;

    /**
     * 大小
     *
     * @type {string}
     * @memberof AppRangDate
     */
    @Prop() public size?: 'large' | 'small' | 'default';

    /**
     * 开始占位提示
     *
     * @type {string}
     * @memberof AppRangDate
     */
    @Prop() public startPlaceholder?: string;

    /**
     * 结束占位提示
     *
     * @type {string}
     * @memberof AppRangDate
     */
    @Prop() public endPlaceholder?: string;

    /**
     * 最小值
     *
     * @type {number}
     * @memberof AppRangDate
     */
    @Prop() public min?: number;

    /**
     * 最大值
     *
     * @type {number}
     * @memberof AppRangDate
     */
    @Prop() public max?: number;

    /**
     * 值分割符
     *
     * @type {boolean}
     * @memberof AppRangDate
     */
    @Prop({ default: '-' }) public valueSeparator?: string;

    /**
     * 关系表单项集合
     *
     * @type {string}
     * @memberof AppRangDate
     */
    @Prop() public valueItemNames?: string;

    /**
     * 输入框失焦
     *
     * @memberof AppDateRangePicker
     */
    public handleBlur() {
        this.$emit("blur", { name: this.name, value: this.value });
    }

    /**
     * 输入框聚焦
     *
     * @memberof AppDateRangePicker
     */
    public handleFocus() {
        this.$emit("focus", { name: this.name, value: this.value });
    }

    /**
     * 最小值
     * 
     * @memberof AppNumberRangePicker
     */
    get minValue() {
        if (this.valueItemNames && this.valueItemNames.split(',').length > 1) {
            const minValueName =  this.valueItemNames.split(',')[0];
            return this.data[minValueName];
        } else {
            return this.value.split(this.valueSeparator)[0];
        }
    }

    /**
     * 最大值
     * 
     * @memberof AppNumberRangePicker
     */
    get maxValue() {
        if (this.valueItemNames && this.valueItemNames.split(',').length > 1) {
            const maxValueName =  this.valueItemNames.split(',')[1];
            return this.data[maxValueName];
        } else {
            return this.value.split(this.valueSeparator)[1];
        }
    }

    /**
     * 数据
     * 
     * @memberof AppNumberRangePicker
     */
    public items: number[] = [];

    /**
     * 值改变
     *
     * @param {number} value 值
     * @param {number} index 项下标
     * @memberof AppNumberRangePicker
     */
    public handleChange(value: number, index: number) {
        this.items[index] = value;
        if (this.items.length == 2) {
            this.$emit('formitemvaluechange', { name: this.name, value: this.items.join(this.valueSeparator) });
        }
        if (this.valueItemNames && this.valueItemNames.split(',').length > 1) {
            const valueName =  this.valueItemNames.split(',')[index];
            this.$emit('formitemvaluechange', { name: valueName, value: value });
        }
    }
}
</script>
<style lang="less">
@import "./app-number-range-picker.less";
</style>