# IP / Subnet 输入框

Here's how to use VEasy's IP input box in our pages

# Usage method

# Ip Usage method

Similar to the IP input box of Windows system, the cursor position can be controlled by the left and right keys of the keyboard, and the decimal point can be typed or the next cursor can be automatically placed if the condition is satisfied. And if the input error occurs, it will be prompted and the error location will be notified in real time.

<template>
  <ve-ip v-model="value" maxWidth="220" @input="$msg(value.join('.'))"></ve-ip>
</template>

<script>
  export default {
    data() {
      return {
        value: [],
      }
    }
  }
</script>

# Subnet Usage method

The subnet mask is similar to the IP / DNS input box, except that the rules are slightly different

Note:

The subnet mask is different from the normal IP address, so the IP component and the Subnet component have certain behavioral differences.
When the previous bit value of the subnet mask is not 255, the latter bit can only be filled with one digit, and the previous bit must conform to the standard subnet mask rule. Otherwise, the error is directly indicated.

<template>
  <ve-ip port v-model="value5"></ve-ip>
  <ve-ip port v-model="value6"></ve-ip>
</template>

<script>
  export default {
    data() {
      return {
        value5: [],
        value6: '172.0.0.1:10000',
      }
    }
  }
</script>

# Disable/Read-Only Input Box

Make IP Input Box Unable to Type

<template>
  <ve-ip v-model="value" maxWidth="220" @input="inputTest" disabled></ve-ip>
  <ve-ip v-model="value1" maxWidth="220" @input="inputTest" readonly></ve-ip>
</template>

<script>
  export default {
    data() {
      return {
        value: [172, 0, 0, 1],
        value2: [255, 255, 255, 255],
      }
    }
  }
</script>

# Use `@error`

Adding @error="error" to attributes can make corresponding processing when an error occurs.

<template>
  <ve-ip
    v-model="value"
    format="ipv4"
    maxWidth="220"
    :message="`IP format error, (${value.join('.')})`"
    @error="handleError"></ve-ip>
</template>

<script>
  export default {
    data() {
      return {
        value: [],
      }
    },

    methods: {
      handleError(value) {
        this.$msg({
          message: value.join('.'),
          type: 'error'
        });
      },
    },
  }
</script>

# Use `@status`

IP Format State Switching Triggers Callback

<template>
  <ve-ip
    v-model="ipv4"
    format="ipv4"
    maxWidth="220"
    message="IP format error"
    @status="handleStatus"></ve-ip>
</template>

<script>
  export default {
    data() {
      return {
        ipv4: [],
      }
    },

    methods: {
      handleStatus(status) {
        this.$msg('IP format error：' + status)
      },
    },
  }
</script>

# IP 输入框端口的支持

通常我们在配置某些设备IP的时候需要指定端口。
这里只需要指定port 即可完成端口的配置

IP组件支持两种不同类型值得绑定，一种为 string 类型，还有一种是 array 类型。需要注意的是，使用 string 类型时可以参考 xxx.xxx.xxx.xxx:ooooo，如果是array类型，那最后一个值代表端口

<template>
  <ve-ip port v-model="value5"></ve-ip>
  <ve-ip port v-model="value6"></ve-ip>
</template>

<script>
  export default {
    data() {
      return {
        value5: [],
        value6: '172.0.0.1:10000',
      }
    }
  }
</script>