u

code/base-project/base-vue/src/App.vue

@@ -1,13 +1,101 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 
+interface TagOption {
+  label: string
+  value: string | number
+}
+
+const tagOptions: TagOption[] = [
+  { label: '标签1', value: 1 },
+  { label: '标签2', value: 2 },
+  { label: '标签3', value: 3 },
+]
+
+const customOptions: TagOption[] = [
+  { label: '成功', value: 'success' },
+  { label: '警告', value: 'warning' },
+  { label: '错误', value: 'error' },
+]
+
+// 多选示例
+const multiSelected = ref<(string | number)[]>([1, 2])
+function handleMultiChange(selectedOptions: TagOption[]) {
+  console.log('多选 change:', selectedOptions)
+}
+
+// 单选示例
+const singleSelected = ref<(string | number)[]>([2])
+function handleSingleChange(selectedOptions: TagOption[]) {
+  console.log('单选 change:', selectedOptions)
+}
+
+// slot 渲染示例
+const slotSelected = ref<(string | number)[]>(['b'])
+
+// 自定义样式示例
+const customSelected = ref<(string | number)[]>(['success'])
+function handleCustomChange(selectedOptions: TagOption[]) {
+  console.log('自定义样式 change:', selectedOptions)
+}
 </script>
 
 <template>
-  <div>
-    content
+  <div style="padding: 20px;">
+    <h2>ATagGroup 使用示例</h2>
+
+    <!-- 1. 多选 options 渲染 -->
+    <section style="margin-bottom: 20px;">
+      <h3>多选 - Options 渲染</h3>
+      <ATagGroup
+        v-model="multiSelected"
+        :options="tagOptions"
+        multiple
+        @change="handleMultiChange"
+      />
+      <p>选中值: {{ multiSelected }}</p>
+    </section>
+
+    <!-- 2. 单选 options 渲染 -->
+    <section style="margin-bottom: 20px;">
+      <h3>单选 - Options 渲染</h3>
+      <ATagGroup
+        v-model="singleSelected"
+        :options="tagOptions"
+        :multiple="false"
+        @change="handleSingleChange"
+      />
+      <p>选中值: {{ singleSelected }}</p>
+    </section>
+
+    <!-- 3. Slot 渲染 -->
+    <section style="margin-bottom: 20px;">
+      <h3>Slot 渲染</h3>
+      <ATagGroup v-model="slotSelected">
+        <ATag value="a">
+          自定义A
+        </ATag>
+        <ATag value="b">
+          自定义B
+        </ATag>
+        <ATag value="c" disabled>
+          自定义C
+        </ATag>
+      </ATagGroup>
+      <p>选中值: {{ slotSelected }}</p>
+    </section>
+
+    <!-- 4. 自定义 checkedProps / uncheckedProps -->
+    <section>
+      <h3>自定义样式</h3>
+      <ATagGroup
+        v-model="customSelected"
+        :options="customOptions"
+        :checked-props="{ type: 'solid', status: 'success' }"
+        :unchecked-props="{ type: 'solid', status: 'default' }"
+        @change="handleCustomChange"
+      />
+      <p>选中值: {{ customSelected }}</p>
+    </section>
   </div>
 </template>
-
-<style lang="scss" scoped>
-
-</style>