ui-form-checkbox-tag 标签式复选框组件

版本：v2.3.11

标签式复选框组件用于以标签形式展示的复选框，支持自定义样式和禁用状态

基本使用

<template>
  <div class="form-checkbox-tag-demo">
    <ui-form-checkbox-tag v-model="checked" value="tag1">标签1</ui-form-checkbox-tag>
    <ui-form-checkbox-tag v-model="checked2" value="tag2">标签2</ui-form-checkbox-tag>
    <p>标签1: {{ checked }}</p>
    <p>标签2: {{ checked2 }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checked = ref(false);
const checked2 = ref(true);
</script>

<style scoped>
.form-checkbox-tag-demo {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>

Props

参数	类型	默认值	说明
modelValue	Boolean	false	是否选中
value	String/Number	-	标签
disabled	Boolean	false	是否禁用
type	String	'default'	标签类型，可选值：default、primary、success、warning、danger

Events

事件	说明	回调参数
change	选中状态变化时触发	(value: Boolean) 当前选中状

示例

不同类型的标签式复选框

<template>
  <div class="form-checkbox-tag-demo">
    <ui-form-checkbox-tag v-model="checked1" type="default">默认值标签</ui-form-checkbox-tag>
    <ui-form-checkbox-tag v-model="checked2" type="primary">主要标签</ui-form-checkbox-tag>
    <ui-form-checkbox-tag v-model="checked3" type="success">成功标签</ui-form-checkbox-tag>
    <ui-form-checkbox-tag v-model="checked4" type="warning">警告标签</ui-form-checkbox-tag>
    <ui-form-checkbox-tag v-model="checked5" type="danger">危险标签</ui-form-checkbox-tag>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
</script>

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/form/form-checkbox-tag/form-checkbox-tag