介绍
本文档主要用于描述 ShadcnInputTag 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnInputTag v-model="tags" :dark="darkMode" />
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
const tags = ref([])
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnInputTag v-model="tags" disabled :dark="darkMode" />
</template>尺寸 (size)
查看代码
vue
<template>
<ShadcnInputTag v-model="tags" size="small" :dark="darkMode" />
<ShadcnInputTag v-model="tags" size="default" :dark="darkMode" />
<ShadcnInputTag v-model="tags" size="large" :dark="darkMode" />
</template>类型 (type)
查看代码
vue
<template>
<ShadcnInputTag v-model="value" type="primary" :dark="darkMode" />
<ShadcnInputTag v-model="value" type="error" :dark="darkMode" />
<ShadcnInputTag v-model="value" type="warning" :dark="darkMode" />
<ShadcnInputTag v-model="value" type="success" :dark="darkMode" />
</template>最大值 (max)
查看代码
vue
<template>
<ShadcnInputTag v-model="tags" max="3" :dark="darkMode" />
</template>表单 (form)
查看代码
vue
<template>
<ShadcnForm ref="formRef" v-model="formState" :dark="darkMode">
<ShadcnFormItem name="tags"
label="Tags"
:rules="[ { required: true, message: 'Please input tags!' } ]" :dark="darkMode">
<ShadcnInputTag v-model="formState.tags" name="tags" :dark="darkMode" />
</ShadcnFormItem>
<ShadcnButton submit :dark="darkMode">Submit</ShadcnButton>
</ShadcnForm>
</template>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
<ShadcnInputTag v-model="tags" glass :dark="isDark" placeholder="输入标签并按回车" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(false)
const tags = ref(['Vue', 'React', 'Angular'])
</script>