oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-09-17 14:49:15 +08:00
1 parent 104e0a78c6
commit 4d0d2f875e
13 files changed
+802 -226
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-vue/packages/ao-design/src/checkbox/checkbox-group.tsx
+176
View File
@@ -0,0 +1,176 @@
import type { PropType, RenderFunction } from 'vue'
import { computed, defineComponent, provide, reactive, ref, watch } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
import Space from '../space/index'
import Checkbox from './checkbox'
import { checkboxGroupKey } from './context'
interface CheckboxOption {
label?: string | RenderFunction
value?: string | number
extra?: string | RenderFunction
disabled?: boolean
[key: string]: any
}
export default defineComponent({
name: 'CheckboxGroup',
props: {
modelValue: {
type: Array as PropType<Array<string | number | boolean>>,
default: () => [],
},
defaultValue: {
type: Array as PropType<Array<string | number | boolean>>,
default: () => [],
},
disabled: {
type: Boolean,
default: false,
},
labelField: {
type: String,
default: 'label',
},
valueField: {
type: String,
default: 'value',
},
extraField: {
type: String,
default: 'extra',
},
options: {
type: Array as PropType<Array<string | number | CheckboxOption>>,
default: [],
},
spaceProps: {
type: Object as PropType<Record<string, any>>,
default: () => ({}),
},
type: {
type: String as PropType<'default' | 'card' | 'pureCard'>,
default: 'default',
},
class: {
type: [String, Array, Object],
default: '',
},
style: {
type: Object,
default: () => ({}),
},
},
emits: ['update:modelValue', 'change'],
setup(props, { slots, emit }) {
const prefixCls = getPrefixCls('checkbox-group')
const _value = ref(props.modelValue ?? props.defaultValue ?? [])
watch(() => props.modelValue, (newVal) => {
_value.value = newVal ?? []
})
const groupDisabled = computed(() => props.disabled)
const groupType = computed(() => props.type)
const handleChange = (val: string | number | boolean, e: Event) => {
const current = _value.value ? [..._value.value] : []
const index = current.indexOf(val)
if (index > -1) {
// 已存在 -> 取消选中
current.splice(index, 1)
}
else {
// 不存在 -> 添加
current.push(val)
}
// 非受控模式才更新内部值
if (props.modelValue === undefined) {
_value.value = current
}
// 通知外部
emit('update:modelValue', current)
emit('change', current, e)
}
// 提供 context 给 Radio 使用
provide(checkboxGroupKey, reactive({
name: 'AoCheckboxGroup' as const,
value: _value,
disabled: groupDisabled,
type: groupType,
slots,
handleChange,
}))
const renderOptions = () => {
return props.options.map((option) => {
const opt
= typeof option === 'string' || typeof option === 'number'
? { [props.labelField]: String(option), [props.valueField]: option }
: option
const labelContent = slots.label
? slots.label({ data: opt })
: typeof opt[props.labelField] === 'function'
? opt[props.labelField]()
: opt[props.labelField]
const extraContent = slots.extra
? slots.extra({ data: opt })
: typeof opt[props.extraField] === 'function'
? opt[props.extraField]()
: opt[props.extraField]
const isChecked
= _value.value.includes(opt[props.valueField])
if (slots.radio) {
return (
<div
key={opt[props.valueField]}
onClick={e => handleChange(opt[props.valueField], e)}
>
{slots.radio({ data: opt, checked: _value.value === opt[props.valueField] })}
</div>
)
}
return (
<Checkbox
key={opt[props.valueField]}
value={opt[props.valueField]}
extra={extraContent}
disabled={opt.disabled ?? props.disabled}
checked={isChecked}
type={props.type}
>
{labelContent}
</Checkbox>
)
})
}
const spaceSize
= ['default', 'card', 'pureCard'].includes(groupType.value)
? [6, 6]
: props.spaceProps.size ?? 0
return () => (
<Space
align="start"
size={spaceSize}
{...props.spaceProps}
class={[
`${prefixCls}-${groupType.value}`,
]}
>
{props.options.length > 0 ? renderOptions() : slots.default?.()}
</Space>
)
},
})
code/base-project/base-vue/packages/ao-design/src/checkbox/checkbox.tsx
+225
View File
@@ -0,0 +1,225 @@
import type { PropType, VNode } from 'vue'
import type { CheckboxGroupContext } from './context'
import { computed, defineComponent, inject, ref, watch } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
import Icon from '../icon/index'
import { checkboxGroupKey } from './context'
export default defineComponent({
name: 'Checkbox',
props: {
modelValue: {
type: Boolean,
default: undefined,
},
checked: {
type: Boolean,
default: undefined,
},
value: {
type: [String, Number, Boolean] as PropType<string | number | boolean>,
default: true,
},
indeterminate: {
type: Boolean,
default: false,
},
defaultChecked: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
type: {
type: String as PropType<'default' | 'card' | 'pureCard'>,
default: 'default',
},
extra: {
type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
default: '',
},
class: {
type: [String, Array, Object],
default: '',
},
style: {
type: Object,
default: () => ({}),
},
},
emits: ['update:modelValue', 'update:checked', 'change'],
setup(props, { slots, emit }) {
const prefixCls = getPrefixCls('checkbox')
const checkboxGroupCtx = inject<CheckboxGroupContext | undefined>(checkboxGroupKey, undefined)
const inGroup = computed(() => !!checkboxGroupCtx)
const isDisabled = computed(() => props.disabled || checkboxGroupCtx?.disabled)
const _checked = ref(props.defaultChecked)
const mergedType = computed(() =>
props.type || checkboxGroupCtx?.type || 'default',
)
const isChecked = computed(() => {
if (inGroup.value && checkboxGroupCtx) {
const groupValue = checkboxGroupCtx.value
if (Array.isArray(groupValue)) {
return groupValue.includes(props.value)
}
return groupValue === props.value
}
return props.checked ?? props.modelValue ?? _checked.value
})
const handleClick = (event: Event) => {
if (isDisabled.value) {
return
}
if (inGroup.value && checkboxGroupCtx) {
checkboxGroupCtx.handleChange(props.value, event)
}
else {
const newChecked = !isChecked.value
if (props.checked === undefined)
_checked.value = newChecked
emit('update:modelValue', newChecked)
emit('update:checked', newChecked)
}
emit('change', { value: props.value, event })
}
watch(() => props.checked, (val) => {
if (val !== undefined) {
_checked.value = val
}
})
const renderDefault = () => (
<label
class={[
`${prefixCls}-default`,
{ [`${prefixCls}-checked`]: isChecked.value },
{ [`${prefixCls}-disabled`]: isDisabled.value },
props.class,
]}
style={{ ...props.style }}
onClick={handleClick}
>
<span class={`${prefixCls}-main`}>
<input
class={`${prefixCls}-input`}
type="checkbox"
onClick={e => e.stopPropagation()}
/>
<span class={`${prefixCls}-inner`}>
{
props.indeterminate
? (
<Icon icon="garden:dash-fill-12" />
)
: isChecked.value
? (
<Icon icon="garden:check-sm-fill-12" />
)
: null
}
</span>
</span>
<div class={`${prefixCls}-content`}>
<div class={`${prefixCls}-label`}>
{slots.default?.()}
</div>
{props.extra && (
<div class={`${prefixCls}-extra`}>
{typeof props.extra === 'function' ? props.extra() : props.extra}
</div>
)}
</div>
</label>
)
const renderCard = () => (
<label
class={[
`${prefixCls}-card`,
{ [`${prefixCls}-checked`]: isChecked.value },
{ [`${prefixCls}-disabled`]: isDisabled.value },
props.class,
]}
style={{ ...props.style }}
onClick={handleClick}
>
<span class={`${prefixCls}-main`}>
<input
class={`${prefixCls}-input`}
type="checkbox"
onClick={e => e.stopPropagation()}
/>
<span class={`${prefixCls}-inner`}>
{
props.indeterminate
? (
<Icon icon="garden:dash-fill-12" />
)
: isChecked.value
? (
<Icon icon="garden:check-sm-fill-12" />
)
: null
}
</span>
</span>
<div class={`${prefixCls}-content`}>
<div class={`${prefixCls}-label`}>
{slots.default?.()}
</div>
{props.extra && (
<div class={`${prefixCls}-extra`}>
{typeof props.extra === 'function' ? props.extra() : props.extra}
</div>
)}
</div>
</label>
)
const renderPureCard = () => (
<label
class={[
`${prefixCls}-pureCard`,
{ [`${prefixCls}-checked`]: isChecked.value },
{ [`${prefixCls}-disabled`]: isDisabled.value },
props.class,
]}
style={{ ...props.style }}
onClick={handleClick}
>
<div class={`${prefixCls}-content`}>
<div class={`${prefixCls}-label`}>
{slots.default?.()}
</div>
{props.extra && (
<div class={`${prefixCls}-extra`}>
{typeof props.extra === 'function' ? props.extra() : props.extra}
</div>
)}
</div>
</label>
)
return () => {
switch (mergedType.value) {
case 'card':
return renderCard()
case 'pureCard':
return renderPureCard()
default:
return renderDefault()
}
}
},
})
code/base-project/base-vue/packages/ao-design/src/checkbox/context.ts
+13
View File
@@ -0,0 +1,13 @@
import type { InjectionKey, Slots } from 'vue'
export interface CheckboxGroupContext {
name: 'AoCheckboxGroup'
value: (string | number | boolean)[]
disabled: boolean
slots: Slots
type?: 'default' | 'card' | 'pureCard'
handleChange: (value: string | number | boolean, e: Event) => void
}
export const checkboxGroupKey: InjectionKey<CheckboxGroupContext>
= Symbol('CheckboxGroup')
code/base-project/base-vue/packages/ao-design/src/checkbox/demo.vue
+46
View File
@@ -0,0 +1,46 @@
<script setup lang="ts">
import { ref } from 'vue'
/* 单个受控 */
const checked1 = ref(false)
/* 单个非受控（只用 defaultChecked） */
const checked2 = ref(true) // 只是初始值演示，不跟随
/* group 多选 */
const groupValue = ref<Array<string | number>>(['B'])
</script>
<template>
<div style="padding:20px">
<h3>单个 Checkbox（受控 v-model:checked）</h3>
<ACheckbox v-model:checked="checked1" value="single1">
选项 1
</ACheckbox>
<p>当前状态: {{ checked1 }}</p>
<h3>单个 Checkbox（非受控 defaultChecked）</h3>
<ACheckbox value="single2" :default-checked="checked2">
选项 2
</ACheckbox>
<p>初始状态: {{ checked2 }}（点击后组件自己维护，不影响这个 ref）</p>
<h3>CheckboxGroup（多选）</h3>
<ACheckboxGroup v-model="groupValue" :options="['A', 'B', 'C']" />
<p>选中值: {{ groupValue }}</p>
<h3>CheckboxGroup（自定义插槽用法）</h3>
<ACheckboxGroup v-model="groupValue">
<ACheckbox value="X">
自定义 X
</ACheckbox>
<ACheckbox value="Y">
自定义 Y
</ACheckbox>
<ACheckbox value="Z">
自定义 Z
</ACheckbox>
</ACheckboxGroup>
<p>选中值: {{ groupValue }}</p>
</div>
</template>
code/base-project/base-vue/packages/ao-design/src/checkbox/index.scss
+222
View File
@@ -0,0 +1,222 @@
@use '../_styles/_variables.scss' as *;
@use 'sass:color';
$checkbox-prefix: '#{$prefix}-checkbox';
.#{$checkbox-prefix}-default {
display: inline-flex;
vertical-align: middle;
color: $text-color-base;
align-items: flex-start;
position: relative;
cursor: pointer;
user-select: none;
&.#{$checkbox-prefix}-checked {
.#{$checkbox-prefix}-main {
.#{$checkbox-prefix}-inner {
border-color: transparent;
background-color: $primary-color;
color: $text-color-anti;
}
}
}
.#{$checkbox-prefix}-main {
cursor: pointer;
display: flex;
align-items: center;
white-space: nowrap;
outline: 0;
.#{$checkbox-prefix}-input {
opacity: 0;
outline: 0;
position: absolute;
z-index: -1;
margin: 0;
width: 0;
height: 0;
box-sizing: border-box;
}
.#{$checkbox-prefix}-inner {
border: 1px solid $border-color;
border-radius: $border-radius;
width: 16px;
height: 16px;
background-color: $bg-color-container;
cursor: pointer;
box-sizing: border-box;
outline: 0;
display: flex;
align-items: center;
justify-content: center;
transition:
background-color 0.1s ease,
border-color 0.1s ease;
}
}
.#{$checkbox-prefix}-content {
margin-left: 8px;
display: inline-block;
flex-direction: column;
.#{$checkbox-prefix}-label {
font-size: 14px;
line-height: 16px;
display: flex;
align-items: center;
color: $text-color-base;
}
.#{$checkbox-prefix}-extra {
font-size: 12px;
color: $text-color-secondary;
margin-top: 4px;
}
}
}
.#{$checkbox-prefix}-card {
color: $text-color-base;
display: inline-flex;
align-items: flex-start;
position: relative;
cursor: pointer;
user-select: none;
padding: 8px 12px;
box-sizing: border-box;
border-radius: $border-radius;
border: 1px solid transparent;
&:hover,
&:hover .#{$checkbox-prefix}-main {
background-color: $bg-color-component;
}
&.#{$checkbox-prefix}-disabled {
cursor: not-allowed;
opacity: 0.5;
}
&.#{$checkbox-prefix}-checked {
border-color: $primary-color;
background-color: $status-info-bg-color;
}
&:hover .#{$checkbox-prefix}-main .#{$checkbox-prefix}-inner {
border-color: $primary-color;
}
&.#{$checkbox-prefix}-checked {
.#{$checkbox-prefix}-main {
.#{$checkbox-prefix}-inner {
border-color: transparent;
background-color: $primary-color;
color: $text-color-anti;
}
}
}
.#{$checkbox-prefix}-main {
cursor: pointer;
display: flex;
align-items: center;
white-space: nowrap;
outline: 0;
.#{$checkbox-prefix}-input {
opacity: 0;
outline: 0;
position: absolute;
z-index: -1;
margin: 0;
width: 0;
height: 0;
box-sizing: border-box;
}
.#{$checkbox-prefix}-inner {
border: 1px solid $border-color;
border-radius: $border-radius;
width: 16px;
height: 16px;
background-color: $bg-color-container;
cursor: pointer;
box-sizing: border-box;
outline: 0;
display: flex;
align-items: center;
justify-content: center;
transition:
background-color 0.1s ease,
border-color 0.1s ease;
}
}
.#{$checkbox-prefix}-content {
margin-left: 8px;
display: inline-block;
flex-direction: column;
.#{$checkbox-prefix}-label {
font-size: 14px;
line-height: 16px;
display: flex;
align-items: center;
color: $text-color-base;
}
.#{$checkbox-prefix}-extra {
font-size: 12px;
color: $text-color-secondary;
margin-top: 4px;
}
}
}
.#{$checkbox-prefix}-pureCard {
color: $text-color-base;
display: inline-flex;
align-items: flex-start;
position: relative;
cursor: pointer;
user-select: none;
padding: 8px 12px;
box-sizing: border-box;
border-radius: $border-radius;
border: 1px solid transparent;
&:hover,
&:hover .#{$checkbox-prefix}-main {
background-color: $bg-color-component;
}
&.#{$checkbox-prefix}-disabled {
cursor: not-allowed;
opacity: 0.5;
}
&.#{$checkbox-prefix}-checked {
border-color: $primary-color;
background-color: $status-info-bg-color;
}
.#{$checkbox-prefix}-content {
display: inline-block;
flex-direction: column;
.#{$checkbox-prefix}-label {
font-size: 14px;
line-height: 16px;
display: flex;
align-items: center;
color: $text-color-base;
}
.#{$checkbox-prefix}-extra {
font-size: 12px;
color: $text-color-secondary;
margin-top: 4px;
}
}
}
code/base-project/base-vue/packages/ao-design/src/components.ts
+2
View File
@@ -1,5 +1,7 @@
export { default as ConfigProvider } from './_config'
export { default as Button } from './button'
export { default as Checkbox } from './checkbox/checkbox'
export { default as CheckboxGroup } from './checkbox/checkbox-group'
export { default as Drawer } from './drawer'
export { default as Group } from './group'
export { default as Icon } from './icon'
code/base-project/base-vue/packages/ao-design/src/index.scss
+1
View File
@@ -16,6 +16,7 @@
@use './space/index.scss' as *;
@use './separator/index.scss' as *;
@use './radio/index.scss' as *;
@use './checkbox/index.scss' as *;
[class*='#{variables.$prefix}-'] {
-webkit-box-sizing: border-box;
code/base-project/base-vue/packages/ao-design/src/radio/index.scss
+3 -3
View File
@@ -74,7 +74,7 @@ $radio-group-prefix: '#{$prefix}-radio-group';
}
.#{$radio-prefix}-content {
font-size: 12px;
font-size: 14px;
margin-left: 8px;
display: inline-block;
flex-direction: column;
@@ -465,12 +465,12 @@ $radio-group-prefix: '#{$prefix}-radio-group';
}
.#{$radio-prefix}-content {
font-size: 12px;
margin-left: 8px;
display: inline-block;
flex-direction: column;
.#{$radio-prefix}-label {
font-size: 14px;
line-height: 16px;
display: flex;
align-items: center;
@@ -513,11 +513,11 @@ $radio-group-prefix: '#{$prefix}-radio-group';
}
.#{$radio-prefix}-content {
font-size: 12px;
display: inline-block;
flex-direction: column;
.#{$radio-prefix}-label {
font-size: 14px;
line-height: 16px;
display: flex;
align-items: center;
code/base-project/base-vue/packages/ao-design/src/radio/radio-group.tsx
+4 -2
View File
@@ -72,13 +72,15 @@ export default defineComponent({
_value.value = newVal ?? undefined
})
const groupDisabled = computed(() => props.disabled)
const groupType = computed(() => props.type)
const handleChange = (val: string | number | boolean | undefined, e: Event) => {
_value.value = val
emit('update:modelValue', val)
emit('change', val, e)
}
const groupDisabled = computed(() => props.disabled)
const groupType = computed(() => props.type)
// 提供 context 给 Radio 使用
provide(radioGroupKey, reactive({
name: 'AoRadioGroup' as const,
code/base-project/base-vue/packages/ao-design/src/radio/radio.tsx
+26 -9
View File
@@ -1,6 +1,6 @@
import type { PropType, VNode } from 'vue'
import type { RadioGroupContext } from './context'
import { computed, defineComponent, inject, ref } from 'vue'
import { computed, defineComponent, inject, ref, watch } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
import { radioGroupKey } from './context'
@@ -11,6 +11,14 @@ export default defineComponent({
type: Boolean,
default: undefined,
},
checked: {
type: Boolean,
default: undefined,
},
value: {
type: [String, Number, Boolean] as PropType<string | number | boolean>,
default: undefined,
},
defaultChecked: {
type: Boolean,
default: false,
@@ -19,10 +27,6 @@ export default defineComponent({
type: Boolean,
default: false,
},
value: {
type: [String, Number, Boolean] as PropType<string | number | boolean>,
default: true,
},
allowUncheck: {
type: Boolean,
default: true,
@@ -36,7 +40,7 @@ export default defineComponent({
default: 'default',
},
},
emits: ['update:modelValue', 'change'],
emits: ['update:modelValue', 'update:checked', 'change'],
setup(props, { slots, emit }) {
const prefixCls = getPrefixCls('radio')
@@ -46,10 +50,14 @@ export default defineComponent({
const isDisabled = computed(() => props.disabled || radioGroupCtx?.disabled)
const _checked = ref(props.defaultChecked)
const mergedType = computed(() =>
props.type || radioGroupCtx?.type || 'default',
)
const isChecked = computed(() => {
if (inGroup.value)
return props.value === radioGroupCtx!.value
return props.modelValue ?? _checked.value
return props.checked ?? props.modelValue ?? _checked.value
})
const isAllowUncheck = computed(() => props.allowUncheck || radioGroupCtx?.allowUncheck)
@@ -66,12 +74,21 @@ export default defineComponent({
}
else {
const newValue = isAllowUncheck.value ? !isChecked.value : true
_checked.value = newValue
if (props.checked === undefined) {
_checked.value = newValue
}
emit('update:modelValue', newValue)
emit('change', props.value, e)
}
}
watch(() => props.checked, (val) => {
if (val !== undefined) {
_checked.value = val
}
})
const renderDefault = () => (
<label
class={[
@@ -211,7 +228,7 @@ export default defineComponent({
)
return () => {
switch (props.type) {
switch (mergedType.value) {
case 'filled':
return renderFilled()
case 'primaryFilled':
code/base-project/base-vue/packages/ao-design/src/tag/tag.tsx
+78 -21
View File
@@ -1,6 +1,6 @@
import type { PropType } from 'vue'
import type { TagGroupContext } from './context'
import { computed, defineComponent, inject, ref } from 'vue'
import { computed, defineComponent, inject, ref, watch } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
import Icon from '../icon/index'
import { tagGroupKey } from './context'
@@ -8,23 +8,72 @@ import { tagGroupKey } from './context'
export default defineComponent({
name: 'Tag',
props: {
shape: { type: String as PropType<'square' | 'round' | 'mark'>, default: 'square' },
size: { type: String as PropType<'small' | 'medium' | 'large'>, default: 'medium' },
type: { type: String as () => 'solid' | 'light' | 'outline' | 'outline-light', default: 'solid' },
status: { type: String as () => 'primary' | 'danger' | 'warning' | 'success' | 'default', default: 'default' },
checkable: { type: Boolean, default: false },
value: { type: [String, Number, Boolean] as PropType<string | number | boolean>, required: true },
checked: { type: Boolean, default: undefined },
defaultChecked: { type: Boolean, default: false },
checkedProps: { type: Object as PropType<any>, default: () => ({ type: 'solid', status: 'primary' }) },
uncheckedProps: { type: Object as PropType<any>, default: () => ({ type: 'solid', status: 'default' }) },
showClose: { type: Boolean, default: false },
icon: { type: String, default: '' },
disabled: { type: Boolean, default: false },
class: { type: [String, Array, Object], default: '' },
style: { type: Object, default: () => ({}) },
shape: {
type: String as PropType<'square' | 'round' | 'mark'>,
default: 'square',
},
size: {
type: String as PropType<'small' | 'medium' | 'large'>,
default: 'medium',
},
type: {
type: String as () => 'solid' | 'light' | 'outline' | 'outline-light',
default: 'solid',
},
status: {
type: String as () => 'primary' | 'danger' | 'warning' | 'success' | 'default',
default: 'default',
},
checkable: {
type: Boolean,
default: false,
},
value: {
type: [String, Number, Boolean] as PropType<string | number | boolean>,
required: true,
},
modelValue: {
type: Boolean,
default: undefined,
},
checked: {
type: Boolean,
default: undefined,
},
defaultChecked: {
type: Boolean,
default: false,
},
checkedProps: {
type: Object as PropType<any>,
default: () => ({ type: 'solid', status: 'primary' }),
},
uncheckedProps: {
type: Object as PropType<any>,
default: () => ({ type: 'solid', status: 'default' }),
},
showClose: {
type: Boolean,
default: false,
},
icon: {
type: String,
default: '',
},
disabled: {
type: Boolean,
default: false,
},
class: {
type: [String, Array, Object],
default: '',
},
style: {
type: Object,
default: () => ({}),
},
},
emits: ['click', 'close', 'update:checked'],
emits: ['change', 'close', 'update:modelValue', 'update:checked'],
setup(props, { slots, emit }) {
const prefixCls = getPrefixCls('tag')
const tagGroupCtx = inject<TagGroupContext | undefined>(tagGroupKey, undefined)
@@ -43,7 +92,7 @@ export default defineComponent({
}
return groupValue === props.value
}
return props.checked ?? _checked.value
return props.checked ?? props.modelValue ?? _checked.value
})
const handleClick = (event: MouseEvent) => {
@@ -54,12 +103,14 @@ export default defineComponent({
tagGroupCtx.handleChange(props.value, event)
}
else {
// 独立 Tag 自己控制
const newChecked = !isChecked.value
_checked.value = newChecked
if (props.checked === undefined)
_checked.value = newChecked
emit('update:modelValue', newChecked)
emit('update:checked', newChecked)
}
emit('click', { value: props.value, event })
emit('change', { value: props.value, event })
}
const handleClose = (event: MouseEvent) => {
@@ -68,6 +119,12 @@ export default defineComponent({
emit('close', { value: props.value, event })
}
watch(() => props.checked, (val) => {
if (val !== undefined) {
_checked.value = val
}
})
return () =>
visible.value && (
<div
code/base-project/base-vue/src/App.vue
+4 -191
View File
@@ -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>
code/base-project/base-vue/src/components.d.ts
Vendored
+2
View File
@@ -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']