You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
890 B
37 lines
890 B
<template> |
|
<div class="flex gap-20"> |
|
<div v-for="item in icons" :key="item" class="icon-container" @click="handleClick(item)" :active="item === active"> |
|
<icon :name="item" :size="84" /> |
|
</div> |
|
</div> |
|
</template> |
|
<script setup> |
|
|
|
const props= defineProps({ |
|
modelValue: { |
|
type: String, |
|
} |
|
}) |
|
|
|
const emit = defineEmits(['update:modelValue']) |
|
|
|
const icons = ['local-icon-ic_01', 'local-icon-ic_02', 'local-icon-ic_03', 'local-icon-ic_04', 'local-icon-ic_05', 'local-icon-ic_06'] |
|
|
|
const active = ref(props.modelValue) |
|
|
|
function handleClick(item) { |
|
active.value = item |
|
emit('update:modelValue', item) |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.icon-container { |
|
border: 1px solid transparent; |
|
cursor: pointer; |
|
padding: 8px; |
|
&:hover, &[active=true] { |
|
background: #DCE4FF; |
|
border-color: #4759D9; |
|
} |
|
} |
|
</style> |