两个输入框为正整数且两个不能同时有值

最新推荐文章于 2024-07-13 13:55:40 发布

开发两年半

最新推荐文章于 2024-07-13 13:55:40 发布

阅读量111

点赞数 1

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/m0_73854491/article/details/139923955

版权

vue2 input写法

 <FormItem
            :label="$t('follow.index.txt56')"
            v-if="followForm.leverType == 1"
          >
            <Select
              v-model="followForm.kcMultiple"
              :max-tag-count="2"
              :placeholder="$t('carouselItem.text52')"
            >
              <Option
                v-for="item in leverData"
                :value="item.value"
                :key="item.value"
                >{{ item.text }}</Option
              >
            </Select>
          </FormItem>
          <FormItem :label="$t('follow.index.txt58')">
            <Input
              type="number"
              style="width: 100%"
              v-model="followForm.fixSheets"
              :placeholder="$t('carouselItem.text269')"
            >
            </Input>
            <span
              style="position: absolute; top: 38px; right: 20px; color: #7c7f82"
              >{{ $t("swap.shareNumber") }}</span
            >
          </FormItem>

    
data() {
    return {    
        followForm: {
            fixSheets: "",
            fixBl: "",
      },
    }
}
watch: {
    followForm: {
      handler(newVal, oldVal) {
        if (newVal.fixSheets != "") {
          this.$nextTick(() => {
            this.followForm.fixBl = "";
          });
        }
        if (Number(newVal.fixSheets) > 1000) {
          this.$nextTick(() => {
            this.followForm.fixSheets = 1000;
          });
        }
        if (newVal.fixBl != "") {
          this.$nextTick(() => {
            this.followForm.fixSheets = "";
          });
        }
        if (Number(newVal.fixBl) > 5) {
          this.$nextTick(() => {
            this.followForm.fixBl = 5;
          });
        }
        if (newVal.fixSheets) {
          this.validatePositiveInteger(newVal.fixSheets, "fixSheets");
        }
        if (newVal.fixBl) {
          this.validatePositiveInteger(newVal.fixBl, "fixBl");
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    validatePositiveInteger(value, fieldName) {
      const num = Number(value);
      if (isNaN(num) || !Number.isInteger(num) || num <= 0) {
        this.followForm[fieldName] = "";
        this.$Message.error(this.$t("carouselItem.text271"));
      }
    },
}

vue3 写法


        <uni-easyinput
          v-model="fixSheets"
          type="number"
          :clearable="false"
          :placeholder="$t('pact.follow.text13')"
          style="text-indent: 1rem"
        />
        <uni-easinput
          v-model="fixBl"
          type="number"
          :clearable="false"
          :placeholder="$t('pact.follow.text15')"
          style="text-indent: 1rem"
        />

const fixSheets = ref('')
const fixBl = ref('')

watch(
  () => fixSheets.value,
  (newVal) => {
    if (newVal != '') {
      nextTick(() => {
        fixBl.value = ''
      })
    }
    if (Number(newVal) > 1000) {
      nextTick(() => {
        fixSheets.value = 1000
      })
    }
  },
  { immediate: true },
)
watch(
  () => fixBl.value,
  (newVal) => {
    if (newVal != '') {
      nextTick(() => {
        fixSheets.value = ''
      })
    }
    if (Number(newVal) > 5) {
      nextTick(() => {
        fixBl.value = 5
      })
    }
  },
  { immediate: true },
)