介绍

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

用法

查看代码

<template>
    <ShadcnInputTag v-model="tags" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref([])
</script>

禁用 (disabled)

查看代码

<template>
    <ShadcnInputTag v-model="tags" disabled />
</template>

尺寸 (size)

查看代码

<template>
    <ShadcnInputTag v-model="tags" size="small" />
    <ShadcnInputTag v-model="tags" size="default" />
    <ShadcnInputTag v-model="tags" size="large" />
</template>

类型 (type)

查看代码

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

最大值 (max)

查看代码

<template>
    <ShadcnInputTag v-model="tags" max="3" />
</template>

表单 (form)

查看代码

<template>
    <ShadcnForm ref="formRef" v-model="formState">
      <ShadcnFormItem name="tags"
                      label="Tags"
                      :rules="[ { required: true, message: 'Please input tags!' } ]">
        <ShadcnInputTag v-model="formState.tags" name="tags"/>
      </ShadcnFormItem>
      <ShadcnButton submit>Submit</ShadcnButton>
    </ShadcnForm>
</template>

输入标签 (Input Tag) 属性

输入标签 (Input Tag) 事件