62 lines
1.0 KiB
Vue
62 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="radio-select"
|
||
|
|
@click="toggleSelect"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-if="!props.isSelected"
|
||
|
|
class="radio-no-select"
|
||
|
|
/>
|
||
|
|
<Icon
|
||
|
|
v-else
|
||
|
|
:file="radioIcon"
|
||
|
|
:size="'20px'"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import Icon from '../Icon.vue';
|
||
|
|
import radioIcon from '../../../assets/icon/radio.svg';
|
||
|
|
|
||
|
|
interface IProps {
|
||
|
|
isSelected: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface IEmits {
|
||
|
|
(e: 'onChange', value: boolean): void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const emits = defineEmits<IEmits>();
|
||
|
|
const props = withDefaults(defineProps<IProps>(),
|
||
|
|
{},
|
||
|
|
);
|
||
|
|
|
||
|
|
function toggleSelect() {
|
||
|
|
emits('onChange', !props.isSelected);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
:not(not) {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: 0;
|
||
|
|
box-sizing: border-box
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio-select {
|
||
|
|
flex: 1;
|
||
|
|
flex-direction: column;
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-tap-highlight-color: transparent;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.radio-no-select {
|
||
|
|
height: 20px;
|
||
|
|
width: 20px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 2px solid #ddd;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|