vue2-elementui-IP输入框组件

Vue2 结合 Element UI 的 IP 输入框组件可以通过自定义指令来实现。以下是一个简单的示例，展示了如何创建一个 IP 输入框组件：

1. 首先，确保你已经安装并设置了 Element UI。
2. 创建一个自定义指令来限制用户只能输入合法的 IP 地址：

// Vue 2 自定义指令 v-ip
Vue.directive('ip', {
  bind(el) {
    // 使用 oninput 事件监听输入
    el.oninput = function(e) {
      const ip = e.target.value;
      const segments = ip.split('.').filter(segment => segment.length);
      if (segments.length > 4 || segments.some(segment => !/^\d+$/i.test(segment) || parseInt(segment, 10) > 255)) {
        e.target.value = ip.substr(0, ip.lastIndexOf('.'));
      }
      // 使用 setProperty 更新输入框的值
      e.target.dispatchEvent(new Event('input'));
    };
  },
  unbind(el) {
    // 移除事件监听
    el.oninput = null;
  }
});

3. 在 Vue 组件中使用该指令：

<template>
  <el-input v-model="ipAddress" v-ip placeholder="请输入IP地址"></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      ipAddress: ''
    };
  }
};
</script>

这个示例中的自定义指令 v-ip 会限制用户输入的 IP 地址格式，确保每个段落之间用点隔开，并且每个段落是 0 到 255 之间的数字。如果输入不合法，则移除最后一个输入的点，并更正输入值。