Обнаружение события щелчка по стилю значка пера
У меня есть значок пера в приложении vue 3, который я хочу заполнить цветом на основе щелчка. Кажется, что он никогда не принимает значение isHearted как истинное и всегда заполняется черным цветом.
Код:
<template>
<div @mouseover = "isHearted = true">
<span class = "info-icon" :class = "{ 'active': isHearted }">
<i data-feather = "heart" @click = "toggleHeart" fill = "{isHearted ? 'blue' : 'black'}"></i>
</span>
</div>
</template>
<script>
import feather from 'feather-icons'
export default {
components: {
},
data() {
return {
isHearted: false,
};
},
mounted() {
feather.replace()
},
methods: {
toggleHeart() {
this.isHearted = !this.isHearted;
},
},
};
</script>
Я удалил его из значка и вместо этого поместил в родительский диапазон. Он по-прежнему показывает только черный цвет. :(
Работает ли @mouseover на div и заполняет ли его синим цветом?
Я бы также предположил, что встроенная заливка также удаляется. Попробуйте использовать класс active для стилизации внутреннего svg с помощью CSS. Просмотрите значок в браузере, чтобы увидеть, какой HTML-код генерируется для значка, и примените соответствующий стиль.
@Adri Кажется, прослушиватель событий не работает. Не знаете, где внести изменения, чтобы заставить эти слушатели работать.
@dantheman Но он использует встроенную заливку черного цвета, где значение isHearted равно false (по умолчанию). Это не прослушивание событий.
Ответы 1
Пожалуйста, попробуйте следующее:
<template>
<span class = "info-icon" :class = "{ 'active': isHearted }" @click = "toggleHeart">
<i data-feather = "heart"></i>
</span>
</template>
<script>
import feather from 'feather-icons'
export default {
data() {
return {
isHearted: false,
};
},
mounted() {
feather.replace()
},
methods: {
toggleHeart() {
this.isHearted = !this.isHearted;
},
},
};
</script>
<style>
.info-icon:hover svg, .info-icon.active svg {
fill: blue;
}
</style>
Это просто использует CSS для стилизации svg, сгенерированного feather.replace()
Работает. Я тоже сегодня узнал кое-что новое. Большое спасибо! :)
Я бы предположил, что
feather.replace()манипулирует DOM, поэтому удаляет прослушиватель событий щелчка. Попробуйте поместить прослушиватель в родительский диапазон.