v-easy-components

# IP / Subnet - Input

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 input box port support

Usually we need to specify the port when configuring some device IP. Here only need to specify port to complete the port configuration

  • .
  • .
  • .
:
  • .
  • .
  • .
:
The IP component supports two different types worth binding, one is the string type, and the other is the array type. It should be noted that when using the string type, you can refer to xxx.xxx.xxx.xxx:ooooo, if it is an array type, the last value represents the port
<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>

# User experience of IP / SubNet input box

In order to facilitate us to enter the IP address, as well as to facilitate our modification, refer to the input box of the windows platform, monitor the user's left and right keys, paste keys, BackSpace, decimal point.

172.16.1.1

172.16.1.1:10000

  • .
  • .
  • .
  • .
  • .
  • .
:
You can try to copy and paste, then use BackSpace to delete, and finally use the decimal point to move the cursor during manual input, or use the left and right keys of the keyboard to move
<template>
  <p>172.16.1.1</p>
  <p>172.16.1.1:10000</p>
  <ve-ip v-model="value7"></ve-ip>
  <ve-ip port v-model="value8"></ve-ip>
</template>

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

# Attributes

Parameter Description Type Optional value Defaults
max-width Maximum width of Component string - -
width The width of the Component string - -
disabled Whether to disable the component, if it is disabled, you can not write data boolean / string true / false false
readonly Read-only component, users cannot directly change boolean / string true / false false
splice-char Delimiter, specifying the incoming IP string to use for splitting string - .
message Error message, used in the wrong situation string - Please enter the correct IP address
port Whether to support port input boolean false / true false
format Specify input box type string ipv4 / ipv6 ipv4

# Ip-Input Events

Event name Event Description Callback parameter
input Input trigger {$event: Event, index: Number}
blur Triggered when a component loses focus {$event: Event, index: Number}
focus Triggered when a component gains focus {$event: Event, index: Number}
keyUp Triggered when the button is raised {$event: Event, index: Number}
keyDown Triggered when the button is pressed {$event: Event, index: Number}
status Monitor whether the value entered at this time is correct status: Boolean

← Steps →