介绍
本文档主要用于描述 ShadcnIPInput 组件的特性和用法。
用法
查看代码
vue
<template>
<ShadcnIPInput v-model="value" :dark="darkMode" />
</template>禁用 (disabled)
查看代码
vue
<template>
<ShadcnIPInput v-model="value" disabled :dark="darkMode" />
</template>尺寸 (size)
查看代码
vue
<template>
<ShadcnIPInput v-model="value" size="small" :dark="darkMode" />
<ShadcnIPInput v-model="value" size="default" :dark="darkMode" />
<ShadcnIPInput v-model="value" size="large" :dark="darkMode" />
</template>类型 (type)
查看代码
vue
<template>
<ShadcnIPInput v-model="value" type="primary" :dark="darkMode" />
<ShadcnIPInput v-model="value" type="error" :dark="darkMode" />
<ShadcnIPInput v-model="value" type="success" :dark="darkMode" />
<ShadcnIPInput v-model="value" type="warning" :dark="darkMode" />
</template>分隔符 (separator)
查看代码
vue
<template>
<ShadcnIPInput v-model="value" separator="." :dark="darkMode" />
<ShadcnIPInput v-model="value" separator="-" :dark="darkMode" />
</template>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-purple-900 to-pink-900' : 'bg-gradient-to-r from-purple-400 to-pink-400']">
<div class="space-y-4">
<ShadcnIPInput v-model="glassValue1" glass :dark="darkMode" separator="." />
<ShadcnIPInput v-model="glassValue2" glass :dark="darkMode" separator="-" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const glassValue1 = ref('192.168.1.1')
const glassValue2 = ref('10.0.0.1')
</script>表单 (form)
查看代码
vue
<template>
<ShadcnForm v-model="formState" :dark="darkMode">
<ShadcnFormItem name="ip" label="IP 地址" :rules="[{ required: true, message: '请输入IP地址' }]" :dark="darkMode">
<ShadcnIPInput v-model="formState.ip" name="ip" :dark="darkMode" />
</ShadcnFormItem>
</ShadcnForm>
</template>