IpInput Ip 输入框

代码演示

基本用法

输入Ip地址和端口

<template>
  <a-form
    ref="formRef"
    layout="vertical"
    :model="formState"
    :rules="formRules"
    style="width: 400px"
  >
    <a-form-item label="IP地址" name="ipPort" required>
      <div class="flex-sc">
        <wl-ip-input v-model:value="formState.ipPort" :hasPort="true" />
        <a-button
          class="btn-check ml-sm"
          type="primary"
          ghost
          @click="handleCheck"
        >
          检查
        </a-button>
      </div>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue";
import { computed, ref, useTemplateRef } from "vue";
const formRef = useTemplateRef("formRef");
const formState = ref({ ipPort: "" });
const formRules = computed(() => {
  return {
    ipPort: [
      { required: true, message: "IP地址不能为空" },
      {
        pattern: /^(\d+)\.(\d+)\.(\d+)\.(\d+)\:(\d+)$/,
        message: "IP地址格式不正确",
      },
    ],
  };
});
function handleCheck() {
  formRef.value.validate("ipPort").then(() => {
    message.success("IP地址格式正确");
  });
}
</script>

API

参数	说明	类型	默认值
value(v-model)	值	string	''
hasPort	是否显示端口	boolean	false