/
radio.vue
79 lines (72 loc) 路 1.86 KB
/
radio.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<template>
<label
:class="[
ns.b(),
ns.is('disabled', disabled),
ns.is('focus', focus),
ns.is('bordered', border),
ns.is('checked', modelValue === label),
ns.m(size),
rawAttrs.class,
]"
:style="containerStyle"
v-bind="labelListeners"
>
<span
:class="[
ns.e('input'),
ns.is('disabled', disabled),
ns.is('checked', modelValue === label),
]"
>
<input
ref="radioRef"
v-model="modelValue"
:class="ns.e('original')"
:value="label"
:name="name || radioGroup?.name"
:disabled="disabled"
type="radio"
v-bind="inputAttrs"
@focus="focus = true"
@blur="focus = false"
@change="handleChange"
/>
<span :class="ns.e('inner')" />
</span>
<span :class="ns.e('label')" @keydown.stop>
<slot>
{{ label }}
</slot>
</span>
</label>
</template>
<script lang="ts" setup>
import { computed, nextTick, useAttrs as useRawAttrs } from 'vue'
import { useAttrs, useNamespace } from '@element-plus/hooks'
import { radioEmits, radioProps } from './radio'
import { useRadio } from './use-radio'
import type { StyleValue } from 'vue'
defineOptions({
name: 'ElRadio',
inheritAttrs: false,
})
const props = defineProps(radioProps)
const emit = defineEmits(radioEmits)
const rawAttrs = useRawAttrs()
const containerStyle = computed<StyleValue>(() => rawAttrs.style as StyleValue)
const inputAttrs = useAttrs({ excludeListeners: true })
const labelListeners = useAttrs({
excludeKeys: computed<string[]>(() => {
return Object.keys(inputAttrs.value)
}),
})
const ns = useNamespace('radio')
const { radioRef, radioGroup, focus, size, disabled, modelValue } = useRadio(
props,
emit
)
function handleChange() {
nextTick(() => emit('change', modelValue.value))
}
</script>