mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
59 lines
1.0 KiB
Vue
59 lines
1.0 KiB
Vue
<template>
|
|
<div
|
|
class="n-radio-button"
|
|
:class="{
|
|
'n-radio-button--disabled': disabled,
|
|
'n-radio-button--checked': checked,
|
|
|
|
}"
|
|
@click="handleClick"
|
|
>
|
|
<div class="n-radio-button__border-mask" />
|
|
<div
|
|
class="n-radio-button__label"
|
|
:class="{
|
|
'simulate-hollow-out-text': checked
|
|
}"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'NRadioButton',
|
|
model: {
|
|
prop: 'privateValue',
|
|
event: 'input'
|
|
},
|
|
props: {
|
|
value: {
|
|
type: [Boolean, String, Number],
|
|
default: null
|
|
},
|
|
privateValue: {
|
|
type: [Boolean, String, Number],
|
|
default: null
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
checked () {
|
|
return this.privateValue === this.value
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick () {
|
|
if (this.disabled) return
|
|
if (this.privateValue !== this.value) {
|
|
this.$emit('input', this.value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|