cw_web/src/views/setting/netSetting/components/IPInputBox.vue

<template>
  <div class="ip-box" :class="{ disabled: props.disabled }">
    <el-input
      ref="input1Ref"
      v-model="ip1"
      :disabled="oDisabled"
      maxlength="3"
      name="ip"
      onkeyup="value=value.replace(/[^\d]/g,'')"
      @blur="submitIp"
      @input="(val) => checkVal(val, 'ip1')"
    />
    <div class="ip-dot" />
    <el-input
      ref="input2Ref"
      v-model="ip2"
      :disabled="oDisabled"
      maxlength="3"
      name="ip"
      onkeyup="value=value.replace(/[^\d]/g,'')"
      @blur="submitIp"
      @input="(val) => checkVal(val, 'ip2')"
    />
    <div class="ip-dot" />
    <el-input
      ref="input3Ref"
      v-model="ip3"
      :disabled="oDisabled"
      maxlength="3"
      name="ip"
      onkeyup="value=value.replace(/[^\d]/g,'')"
      @blur="submitIp"
      @input="(val) => checkVal(val, 'ip3')"
    />
    <div class="ip-dot" />
    <el-input
      ref="input4Ref"
      v-model="ip4"
      :disabled="oDisabled"
      maxlength="3"
      name="ip"
      onkeyup="value=value.replace(/[^\d]/g,'')"
      @blur="submitIp"
      @input="(val) => checkVal(val, 'ip4')"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElInput } from 'element-plus'

interface Props {
  ipVal: string | undefined
  disabled: number | undefined
}

const props = defineProps<Props>()
const emit = defineEmits<{
  'update:ipVal': [string]
}>()

const oDisabled = ref()

watch(
  () => props.disabled,
  (newValue) => {
    oDisabled.value = Number(newValue)
  }
)

const ip1 = ref()
const ip2 = ref()
const ip3 = ref()
const ip4 = ref()

watch(
  () => props.ipVal,
  (newValue) => {
    const ip = newValue?.match(/\d+/g)
    if (ip) {
      ip1.value = ip[0]
      ip2.value = ip[1]
      ip3.value = ip[2]
      ip4.value = ip[3]
    }
  }
)

const input1Ref = ref<InstanceType<typeof ElInput>>()
const input2Ref = ref<InstanceType<typeof ElInput>>()
const input3Ref = ref<InstanceType<typeof ElInput>>()
const input4Ref = ref<InstanceType<typeof ElInput>>()

const submitIp = () => {
  if (ip1.value && ip2.value && ip3.value && ip4.value) {
    let ipVal = ip1.value + '.' + ip2.value + '.' + ip3.value + '.' + ip4.value
    emit('update:ipVal', ipVal)
  } else {
    emit('update:ipVal', '')
  }
}
const checkVal = (val: string, key: string) => {
  if (parseInt(val) > 255) {
    switch (key) {
      case 'ip1':
        ip1.value = 255
        focusInput(2)
        break
      case 'ip2':
        ip2.value = 255
        focusInput(3)
        break
      case 'ip3':
        ip3.value = 255
        focusInput(4)
        break
      case 'ip4':
        ip4.value = 255
        break
      default:
        break
    }
  } else if (parseInt(val) <= 255 && parseInt(val) >= 100) {
    //输入三位数自动跳到下一个输入值
    switch (key) {
      case 'ip1':
        focusInput(2)
        break
      case 'ip2':
        focusInput(3)
        break
      case 'ip3':
        focusInput(4)
        break
      default:
        break
    }
  }
}
const focusInput = (key: number) => {
  switch (key) {
    case 2:
      input2Ref.value?.focus()
      break
    case 3:
      input3Ref.value?.focus()
      break
    case 4:
      input4Ref.value?.focus()
      break
    default:
      break
  }
}
</script>

<style lang="scss" scoped>
.ip-box {
  width: 210px;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  height: 32px;
  display: flex;
  :deep(.el-input) {
    width: 50px;
  }
  :deep(.el-input__inner) {
    border: 0 !important;
  }
  :deep(.el-input__wrapper) {
    box-shadow: none;
    background-color: unset;
  }
  :deep(.el-form-item.is-error) {
    box-shadow: none;
  }
}
.ip-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000000;
  display: flex;
  place-self: center;
}
.disabled {
  background-color: #f5f7fa;
}
</style>