u
This commit is contained in:
oneao committed
1 parent
1b73170f78
commit
104e0a78c6
14 files changed
+417
-390
No files matched your search
@@ -1,101 +1,200 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface TagOption {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
const selectedValue = ref()
|
||||
|
||||
const tagOptions: TagOption[] = [
|
||||
{ label: '标签1', value: 1 },
|
||||
{ label: '标签2', value: 2 },
|
||||
{ label: '标签3', value: 3 },
|
||||
// 自定义字段名
|
||||
const options = [
|
||||
{ name: '选项一', id: 1, note: '这是额外信息 1' },
|
||||
{ name: '选项二', id: 2, note: '这是额外信息 2' },
|
||||
{ name: '选项三', id: 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)
|
||||
function handleChange(val: string | number | boolean) {
|
||||
console.log('当前选中值:', val)
|
||||
}
|
||||
|
||||
// 单选示例
|
||||
const singleSelected = ref<(string | number)[]>([2])
|
||||
function handleSingleChange(selectedOptions: TagOption[]) {
|
||||
console.log('单选 change:', selectedOptions)
|
||||
function toggleThemeLight() {
|
||||
document.documentElement.setAttribute('theme-mode', 'light')
|
||||
}
|
||||
|
||||
// slot 渲染示例
|
||||
const slotSelected = ref<(string | number)[]>(['b'])
|
||||
|
||||
// 自定义样式示例
|
||||
const customSelected = ref<(string | number)[]>(['success'])
|
||||
function handleCustomChange(selectedOptions: TagOption[]) {
|
||||
console.log('自定义样式 change:', selectedOptions)
|
||||
function toggleThemeDark() {
|
||||
document.documentElement.setAttribute('theme-mode', 'dark')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="padding: 20px;">
|
||||
<h2>ATagGroup 使用示例</h2>
|
||||
<AButton status="primary" @click="toggleThemeLight">
|
||||
白天
|
||||
</AButton>
|
||||
<AButton status="primary" @click="toggleThemeDark">
|
||||
黑天
|
||||
</AButton>
|
||||
|
||||
<!-- 1. 多选 options 渲染 -->
|
||||
<section style="margin-bottom: 20px;">
|
||||
<h3>多选 - Options 渲染</h3>
|
||||
<ATagGroup
|
||||
v-model="multiSelected"
|
||||
:options="tagOptions"
|
||||
multiple
|
||||
@change="handleMultiChange"
|
||||
<div class="demo-wrapper">
|
||||
<div class="demo-container">
|
||||
<h3>Default</h3>
|
||||
<ARadioGroup
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label-field="name"
|
||||
value-field="id"
|
||||
extra-field="note"
|
||||
type="default"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<p>选中值: {{ multiSelected }}</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 2. 单选 options 渲染 -->
|
||||
<section style="margin-bottom: 20px;">
|
||||
<h3>单选 - Options 渲染</h3>
|
||||
<ATagGroup
|
||||
v-model="singleSelected"
|
||||
:options="tagOptions"
|
||||
:multiple="false"
|
||||
@change="handleSingleChange"
|
||||
<div class="demo-container">
|
||||
<h3>filled</h3>
|
||||
<ARadioGroup
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label-field="name"
|
||||
value-field="id"
|
||||
extra-field="note"
|
||||
type="filled"
|
||||
size="small"
|
||||
:allow-uncheck="false"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<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"
|
||||
</div>
|
||||
<div class="demo-container">
|
||||
<h3>filled</h3>
|
||||
<ARadioGroup
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label-field="name"
|
||||
value-field="id"
|
||||
extra-field="note"
|
||||
type="filled"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<p>选中值: {{ customSelected }}</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="demo-container">
|
||||
<h3>filled</h3>
|
||||
<ARadioGroup
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label-field="name"
|
||||
value-field="id"
|
||||
extra-field="note"
|
||||
type="filled"
|
||||
size="large"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<h3>primaryFilled</h3>
|
||||
<ARadioGroup
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label-field="name"
|
||||
value-field="id"
|
||||
extra-field="note"
|
||||
type="primaryFilled"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<h3>outline</h3>
|
||||
<ARadioGroup
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label-field="name"
|
||||
value-field="id"
|
||||
extra-field="note"
|
||||
type="outline"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<h3>card</h3>
|
||||
<ARadioGroup
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label-field="name"
|
||||
value-field="id"
|
||||
extra-field="note"
|
||||
type="card"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<h3>pureCard</h3>
|
||||
<ARadioGroup
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label-field="name"
|
||||
value-field="id"
|
||||
extra-field="note"
|
||||
type="pureCard"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<h3>自定义插槽radio</h3>
|
||||
<ARadioGroup
|
||||
v-model="selectedValue" :options="options"
|
||||
value-field="id"
|
||||
>
|
||||
<template #radio="{ data, checked }">
|
||||
<div
|
||||
:style="{
|
||||
padding: '4px 8px',
|
||||
border: checked ? '2px solid #409eff' : '1px solid #dcdfe6',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
marginRight: '4px',
|
||||
}"
|
||||
>
|
||||
{{ checked ? '选中' : '未选中' }} - {{ data.name }}
|
||||
</div>
|
||||
</template>
|
||||
</ARadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.demo-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 24px 16px;
|
||||
min-height: 100vh;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 主题背景色 */
|
||||
:root[theme-mode='light'] .demo-wrapper {
|
||||
}
|
||||
:root[theme-mode='dark'] .demo-wrapper {
|
||||
background-color: #1e1e1e;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user