mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 12:48:04 +08:00
refactor(components): [checkbox-group] switch to script-setup syntax (#7825)
* refactor(components): [checkbox-group] switch to script-setup syntax * refactor(components): [checkbox-group] switch to script-setup syntax * refactor(components): [checkbox-group] switch to script-setup syntax
This commit is contained in:
parent
0600f27af5
commit
452f9fc4f9
@ -1,85 +1,70 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
h,
|
||||
nextTick,
|
||||
provide,
|
||||
renderSlot,
|
||||
toRefs,
|
||||
watch,
|
||||
} from 'vue'
|
||||
<template>
|
||||
<component
|
||||
:is="tag"
|
||||
:id="groupId"
|
||||
:class="ns.b('group')"
|
||||
role="group"
|
||||
:aria-label="!isLabeledByFormItem ? label || 'checkbox-group' : undefined"
|
||||
:aria-labelledby="isLabeledByFormItem ? elFormItem.labelId : undefined"
|
||||
>
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, provide, toRefs, watch } from 'vue'
|
||||
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
|
||||
import { debugWarn } from '@element-plus/utils'
|
||||
import { useNamespace, useSize } from '@element-plus/hooks'
|
||||
import {
|
||||
checkboxEmits,
|
||||
useCheckboxGroup,
|
||||
useCheckboxGroupId,
|
||||
useCheckboxGroupProps,
|
||||
} from './checkbox'
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'ElCheckboxGroup',
|
||||
})
|
||||
|
||||
props: useCheckboxGroupProps,
|
||||
const props = defineProps(useCheckboxGroupProps)
|
||||
const emit = defineEmits(checkboxEmits)
|
||||
|
||||
emits: [UPDATE_MODEL_EVENT, 'change'],
|
||||
const { elFormItem } = useCheckboxGroup()
|
||||
const { groupId, isLabeledByFormItem } = useCheckboxGroupId(props, {
|
||||
elFormItem,
|
||||
})
|
||||
const checkboxGroupSize = useSize()
|
||||
const ns = useNamespace('checkbox')
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
const { elFormItem } = useCheckboxGroup()
|
||||
const { groupId, isLabeledByFormItem } = useCheckboxGroupId(props, {
|
||||
elFormItem,
|
||||
})
|
||||
const checkboxGroupSize = useSize()
|
||||
const ns = useNamespace('checkbox')
|
||||
const changeEvent = (value) => {
|
||||
emit(UPDATE_MODEL_EVENT, value)
|
||||
nextTick(() => {
|
||||
emit('change', value)
|
||||
})
|
||||
}
|
||||
|
||||
const changeEvent = (value) => {
|
||||
emit(UPDATE_MODEL_EVENT, value)
|
||||
nextTick(() => {
|
||||
emit('change', value)
|
||||
})
|
||||
}
|
||||
|
||||
const modelValue = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(val) {
|
||||
changeEvent(val)
|
||||
},
|
||||
})
|
||||
|
||||
provide('CheckboxGroup', {
|
||||
name: 'ElCheckboxGroup',
|
||||
modelValue,
|
||||
...toRefs(props),
|
||||
checkboxGroupSize,
|
||||
changeEvent,
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
elFormItem.validate?.('change').catch((err) => debugWarn(err))
|
||||
}
|
||||
)
|
||||
return () => {
|
||||
return h(
|
||||
props.tag,
|
||||
{
|
||||
id: groupId.value,
|
||||
class: ns.b('group'),
|
||||
role: 'group',
|
||||
'aria-label': !isLabeledByFormItem.value
|
||||
? props.label || 'checkbox-group'
|
||||
: undefined,
|
||||
'aria-labelledby': isLabeledByFormItem.value
|
||||
? elFormItem.labelId
|
||||
: undefined,
|
||||
},
|
||||
[renderSlot(slots, 'default')]
|
||||
)
|
||||
}
|
||||
const modelValue = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(val) {
|
||||
changeEvent(val)
|
||||
},
|
||||
})
|
||||
|
||||
provide('CheckboxGroup', {
|
||||
name: 'ElCheckboxGroup',
|
||||
modelValue,
|
||||
...toRefs(props),
|
||||
checkboxGroupSize,
|
||||
changeEvent,
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
elFormItem.validate?.('change').catch((err) => debugWarn(err))
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user