本文章记录,如何在vue3项目开发中,使用ip输入框组件.

之前写过vue2版本的ip组件,为了更好的适应vue3,此次进行vue3代码重写

几乎涵盖电脑上自带的IP输入框效果,如有问题,欢迎留言探讨.

先上效果图:

禁用效果图:

主要是组件的开发,代码如下,可直接拷贝使用.

大概思路就是: 使用四个输入框拼接,然后给输入内容添加校验操作,添加光标移动,

使用v-model语法糖特性

组件: IpAddress.vue

注册为组件以后,在页面中使用如下，当然，组件名自己定义，我这里组件名是IpAddress

// ipAddress双向绑定,handleBlur 可以在失去光标时，做校验等操作