介绍

本文档主要用于描述 ShadcnIPInput 组件的特性和用法。

用法

查看代码

<template>
    <ShadcnIPInput v-model="value" />
</template>

禁用 (disabled)

查看代码

<template>
    <ShadcnIPInput v-model="value" disabled />
</template>

尺寸 (size)

查看代码

<template>
    <ShadcnIPInput v-model="value" size="small" />
    <ShadcnIPInput v-model="value" size="default" />
    <ShadcnIPInput v-model="value" size="large" />
</template>

类型 (type)

查看代码

<template>
    <ShadcnIPInput v-model="value" type="primary"/>
    <ShadcnIPInput v-model="value" type="error"/>
    <ShadcnIPInput v-model="value" type="success"/>
    <ShadcnIPInput v-model="value" type="warning"/>
</template>

分隔符 (separator)

查看代码

<template>
    <ShadcnIPInput v-model="value" separator="."/>
    <ShadcnIPInput v-model="value" separator="-"/>
</template>

表单 (form)

查看代码

<template>
    <ShadcnForm v-model="formState">
      <ShadcnFormItem name="ip" label="IP 地址" :rules="[{ required: true, message: '请输入IP地址' }]">
        <ShadcnIPInput v-model="formState.ip" name="ip"/>
      </ShadcnFormItem>
    </ShadcnForm>
</template>

IP输入框 (IP Input) 属性

IP输入框 (IP Input) 事件