u
This commit is contained in:
oneao committed
1 parent
104e0a78c6
commit
4d0d2f875e
13 files changed
+802
-226
No files matched your search
@@ -1,200 +1,13 @@
|
||||
<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>
|
||||
content
|
||||
</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;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.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>
|
||||
</style>
|
||||
@@ -9,6 +9,8 @@ export {}
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AButton: typeof import('@ao/ao-design')['Button']
|
||||
ACheckbox: typeof import('@ao/ao-design')['Checkbox']
|
||||
ACheckboxGroup: typeof import('@ao/ao-design')['CheckboxGroup']
|
||||
AConfigProvider: typeof import('@ao/ao-design')['ConfigProvider']
|
||||
ADrawer: typeof import('@ao/ao-design')['Drawer']
|
||||
AGroup: typeof import('@ao/ao-design')['Group']
|
||||
|
||||
Reference in new issue
Block a user