vue金额区间组件

<template>
  <div>
    <div class="institutionalScopeBox">
      <amount-input
        v-model="query.amountMin"
        clearable
        placeholder="最小票据金额"
        :readonly="readonly"
        :is-icon="isIcon"
        @change="handleChange"
        @blur="handleInput()"
      />
      <span>至</span>
      <amount-input
        v-model="query.amountMax"
        clearable
        placeholder="最大票据金额"
        :readonly="readonly"
        :is-icon="isIcon"
        @change="handleChange"
        @blur="handleInput()"
      />
    </div>
  </div>

</template>

<script>

export default {
  name: 'AmountRange',
  props: {
    value: Array, // 绑定的数据
    placeholder: {
      type: String,
      default: '请输入金额'
    }, // 提示句
    disabled: { // 是否需要清楚圖標
      type: Boolean,
      default: false
    }, // 是否禁用
    clearable: { // 是否需要清楚圖標
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      query: {
        amountMin: '',
        amountMax: ''
      },
      reValue: [],
      isIcon: false
    }
  },
  watch: {
    value(v) {
      this.query.amountMin = v ? v[0] : ''
      this.query.amountMax = v ? v[1] : ''
    }
  },
  created() {
    this.query.amountMin = this.value ? this.value[0] : ''
    this.query.amountMax = this.value ? this.value[1] : ''
  },
  methods: {
    handleChange() {
      this.reValue = [this.query.amountMin, this.query.amountMax]
      this.$emit('input', this.reValue)
    },
    handleInput() {
      this.reValue = [this.query.amountMin, this.query.amountMax]
      if (this.query.amountMin && this.query.amountMax &&
      // eslint-disable-next-line eqeqeq
        this.query.amountMax != Math.max(this.query.amountMax, this.query.amountMin)) {
        const min = this.query.amountMax
        const max = this.query.amountMin
        this.reValue = [min, max]
        this.query.amountMin = min
        this.query.amountMax = max
      }
      this.$emit('input', this.reValue)
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/.institutionalScopeBox{
    height: 30px;
    display: flex;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: content-box;
    span{
      display: inline-block;
      line-height: 28px;
    }
    .el-input--small {
      height: 30px;
      line-height: 30px;
      .el-input__inner{
        height: 30px;
        padding-right: 15px;
        min-width: 100%;
        border-radius: 4px;
        border: 0px;
      }
    }
  }
</style>