Добрый день,
Есть один
parent компонент, в котором содержатся дочерние компоненты
child.*
parentchildchildchild
...
child
В каждом
child есть поле и при клике по этому полю открывается
tooltip описание. Если перекликать все филды, то пооткрываются все тултипы. Я хочу каким то образом сделать так, чтобы при клике по одному филду - кагисились все, ктоорые расположены в братских элементах.
<template>
<div>
<div @click="handleEvent($event)" @mouseleave="turnOffCommix">
<slot></slot>
</div>
<div class="change-help"
:class="{'change-help__no-bg': !showIcon}"
:style="helpStyle"
@click="handleEvent($event)"
>
<template v-if="showIcon">?</template>
<div class="change-hint" :style="hintStyle">
<p class="change-hint__text">
{{ msg }}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
showIcon: {
default: true,
type: Boolean
},
msg: {
default: 'empty',
type: String
}
},
data () {
return {
showHelp: false
};
},
methods: {
handleEvent (event) {
this.turnOnCommix();
},
turnOnCommix: function(){
this.showHelp = true;
},
turnOffCommix: function(){
this.showHelp = false;
}
},
computed: {
hintStyle: function () {
return {opacity: this.showHelp ? 1 : 0};
},
helpStyle: function () {
return {
overflow: this.showHelp ? 'visible' : 'transparent'
};
}
}
};
</script>
Думал в сторону событий (
this.$emit('turn-off') ). Но их вроде как правильно передавать наверх к родителям, а дети уже реактивно перегенерируют представление. И к тому же как понять в таком случае, что для текущего узла, где тултип всплыл - его тушить нельзя до нажатия по другому филду.
Средний
Средний
