vue 加减数字输入框

index主页面

<template>
  <div>
    <numInput :frontTit="'限制年龄'" :afterTit="'周岁'" @num="getNum" />

    <el-button @click="getData">获取</el-button>
  </div>
</template>

<script>
import numInput from './numInput'

export default {
  name: '',
  components: { numInput },
  props: {},
  data() {
    return {
      data: ''
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    getNum(data) {
      this.data = data
    },
    getData() {
      console.log(this.data)
    }
  }
}
</script>

numInput.vue

<template>
  <div class="labour-admission">
	  <a-card :bordered="false">
      <a-form :form="form">
        <div class="box">
          <div class="df">
            <div class="mr10">{{ frontTit }}</div>
            <a-form-item>
              <a-input v-decorator="['num', validatorRules.num]" placeholder="请输入年龄" @change="manChange">
                <div slot="addonBefore" @click="manMinus" class="mouse">
                  <a-icon type="minus" />
                </div>
                <div slot="addonAfter" @click="manPlus" class="mouse">
                  <a-icon type="plus" />
                </div>
              </a-input>
            </a-form-item>
            <div class="ml10">{{ afterTit }}</div>
          </div>
        </div>
      </a-form>
	  </a-card>
  </div>
</template>

<script>
export default {
  name: 'LabourAdmission',
  components: {},
  props: {
    frontTit: {
      type: String,
      default: ''
    },
    afterTit: {
      type: String,
      default: ''
    },
  },
  data() {
    // 数字 校验规则
    let limitphone = (rule, value, callback) => {
      const num = /^([1-9][0-9]*){1,3}$/; // 数字
      if (value === "" || value === null || value === undefined) {
        callback("请输入数字");
      }else {
        if (!num.test(value)) {
          callback("请输入大于0的正整数");
        } else {
          callback();
        }
      }
    };
    return {
      form: this.$form.createForm(this),
      validatorRules: {
        num: {
          rules: [{ validator: limitphone, trigger: "blur" }], // validator 自定义校验，trigger 收集子节点的值的时机
        },
      },
      
      addNum: 1,
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    manChange(e) {
      this.addNum = e.target.value * 1
      this.$nextTick(function() {
        this.handleSubmit()
      })
    },
    manMinus() {
      this.addNum = this.addNum - 1
      if (this.addNum < 1) {
        this.addNum = 1
      }
      this.$nextTick(function() {
        this.form.setFieldsValue({ num: this.addNum + '' })
        this.handleSubmit()
      })
    },
    manPlus() {
      this.addNum = this.addNum + 1
      this.$nextTick(function() {
        this.form.setFieldsValue({ num: this.addNum + '' })
        this.handleSubmit()
      })
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('num', values.num)
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
.labour-admission {
  .box {
    border: 1px solid rgba(230, 240, 252, 68);
    padding: 20px 50px;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .mr10 {
    margin-right: 10px;
    margin-bottom: 24px;
  }
  .ml10 {
    margin-left: 10px;
    margin-bottom: 24px;
  }
  .df {
    display: flex;
    align-items: center;
    user-select: none;
  }
  .mouse {
    cursor: pointer;
  }
}
</style>