1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- <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>
|