201 lines
4.4 KiB
Vue
201 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const selectedValue = ref()
|
|
|
|
// 自定义字段名
|
|
const options = [
|
|
{ name: '选项一', id: 1, note: '这是额外信息 1' },
|
|
{ name: '选项二', id: 2, note: '这是额外信息 2' },
|
|
{ name: '选项三', id: 3 },
|
|
]
|
|
|
|
function handleChange(val: string | number | boolean) {
|
|
console.log('当前选中值:', val)
|
|
}
|
|
|
|
function toggleThemeLight() {
|
|
document.documentElement.setAttribute('theme-mode', 'light')
|
|
}
|
|
function toggleThemeDark() {
|
|
document.documentElement.setAttribute('theme-mode', 'dark')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AButton status="primary" @click="toggleThemeLight">
|
|
白天
|
|
</AButton>
|
|
<AButton status="primary" @click="toggleThemeDark">
|
|
黑天
|
|
</AButton>
|
|
|
|
<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"
|
|
/>
|
|
</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="small"
|
|
:allow-uncheck="false"
|
|
@change="handleChange"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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>
|