Question

我的目标是使用Vue组件制作一个渲染列表（来自JSON文件，但现在不是重点）。它似乎可行，但主要问题是其他事情：我想根据元素的悬停动态添加类，并且仅在同级元素之一采用此类时才删除。换句话说-始终应该有一个“活动”元素。

我的代码只是使用@mouseover和@mouseleave进行处理，因此当我离开整个容器时，没有任何元素处于活动状态。我正在尝试使用道具，全局变量，引用，事件侦听器等……现在已经有一个多星期了，我真的不知道该如何解决这个问题。

这是JSfiddle：https://jsfiddle.net/em3gp4yc/ 这是代码：

<div id="app">
  <div>
    <p>Any button hovered?: {{ test }}</p>
      <div id="kontener" @mouseover="AppH" @mouseleave="AppNh"><example class="example" v-for="example in 3" @mouseover="AppH" :hovered="AppHovered"></example></div>
      <p>App hovered?: {{ AppHovered }}</p>
  </div>
</div>

.example {
  border: 1px solid black;
  width: 100%;
  transition: 0.5s;
  text-align: center;
}

.ex_hover {
  background-color: lightblue;
}

#kontener {
  width: 200px;
}

window.Event = new Vue()

Vue.component('example', {
    props: { hovered: Boolean },
  template: '<div @mouseover="hoverOn" @mouseleave="hoverOff" :class="{ ex_hover: isHover }"><p>hover: {{ isHover }}, prop: {{ hovered }}</p></div>',
  data: function() {
    return {
        isHover: false,
    }
  },
  computed: {
    wyliczona: function() {
        return hovered;
    }
    },
  methods: {
    execute () {
      Event.$emit('execute')
    },
    hoverOn() {
      this.isHover = true;
      Event.$emit('hoverOn');
    },
    hoverOff() {
      this.isHover = false;
      Event.$emit('hoverOff');
    },
  }
})

new Vue({
  el: '#app',
  data: function() {
    return {
      AppHovered: false,
        test: false,
    }
  },
  methods: {
    AppH: function() {
        this.AppHovered = true;
    },
    AppNh: function() {
        this.AppHovered = false;
    }
  },
  created () {
    Event.$on('execute', () => alert('Doing some fancy stuff...'));
    Event.$on('hoverOn', () => this.test = true);
    Event.$on('hoverOff', () => this.test = false);
  }
})

仅当元素的同级（呈现）悬停时才删除它的类

0 个答案: