JG-CLIENT-TEMP/src/components/NumberInput/index.vue

<template>
  <div class="operateBox">
    <div class="leftBox">
      <svg-icon
        :icon-class="jiaDisabled ? 'bujian' : 'jian'"
        class="svgStyle"
        size="25"
        @click="value = value - step"
      />
    </div>
    <el-input
      v-model="value"
      :disabled="jiaDisabled"
      :max="max"
      :min="min"
      class="showSum"
    />
    <div class="rightBox">
      <svg-icon
        :icon-class="jiaDisabled ? 'bujia' : 'jia'"
        class="svgStyle"
        size="25"
        @click="value = value + step"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  modelValue: {
    type: Number,
    default: 0,
  },
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: 100000000,
  },
  step: {
    type: Number,
    default: 1,
  },
});

const emits = defineEmits(["update:modelValue"]);

const jiaDisabled = computed(() => {
  return props.max && props.modelValue >= props.max;
});

const value = computed({
  get() {
    return Number(props.modelValue);
  },
  set(val) {
    if (val < props.min) {
      val = props.min;
    }
    if (val > props.max) {
      val = props.max;
    }
    emits("update:modelValue", val);
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: bold;
  font-size: $f38;
  color: black;
  background-color: rgba(255, 255, 255, 0);
}

:deep(.el-input__wrapper) {
  border: none !important;
  outline: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0);
}

.describeText {
  font-size: $f20;
  color: $font-default-60;
  line-height: 25px;
  text-align: center !important;
}

.operate {
  .operateText {
    margin-bottom: $p5;
  }

  .operateBox {
    width: 290px;
    height: 70px;
    border: 2px solid black;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;

    .leftBox {
      width: 70px;
      height: 70px;
      @include flex;
    }

    .showSum {
      flex: 1;
      @include flex;
      border: 2px solid black;
      border-top: 0px;
      border-bottom: 0px;
      font-weight: bold;
      font-size: $f38;
    }

    .rightBox {
      width: 70px;
      height: 70px;
      @include flex;
    }
  }
}

.operateBox {
  width: 290px;
  height: 70px;
  border: 2px solid black;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;

  .leftBox {
    width: 70px;
    height: 70px;
    @include flex;
  }

  .showSum {
    flex: 1;
    @include flex;
    border: 2px solid black;
    border-top: 0px;
    border-bottom: 0px;
    font-weight: bold;
    font-size: $f38;
  }

  .rightBox {
    width: 70px;
    height: 70px;
    @include flex;
  }
}
</style>