在鼠标悬停时动态添加和删除类 - Vue.js

Posted 2023-02-23

【中文标题】在鼠标悬停时动态添加和删除类 - Vue.js

【英文标题】：Dynamically add and remove classes on mouseover - Vue.js

【发布时间】：2018-07-31 05:22:52

【问题描述】：

我可以使用 Vue 在鼠标悬停时成功添加一个类。但是我想在鼠标离开元素时删除该类。在 Vue 中处理这个问题的惯用方式是什么？

<template>
  <div id="navigation">
    <div class="nav-container">
      <nav>
        <router-link to="/" class="home">Ping Party</router-link>
        <div class="navigation-actions">
          <router-link to="/sign_in" v-if="!isLoggedIn" class="sign_in">Sign In</router-link>
          <router-link to="/sign_up" v-if="!isLoggedIn" @mouseover.native="mouseOver" class="sign_up" ref="sign_up">Sign Up</router-link>
          <router-link to="/users" v-if="isLoggedIn" class="users">Users</router-link>
          <v-btn :click.prevent="signOut()" v-if="isLoggedIn">Sign Out</v-btn>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
  import SignUp from "../forms/SignUp";
  import SignIn from "../forms/SignIn";

  export default 
    components: 
      SignUp,
      SignIn
    ,
    computed: 
      isLoggedIn () 
        return this.$store.getters.isLoggedIn
      
    ,
    methods: 
      signOut: function() 
        this.$store.commit("LOGOUT")
        this.$store.commit("FLASH_MESSAGE", 
          message: "Signed Out Successfully",
          show: true,
          styleClass: "error",
          timeOut: 4000
        )
        this.$router.push('/')
      ,
      mouseOver: function() 
        this.$refs.sign_up.$vnode.elm.classList.add("hovered")
      
    
  
</script>

正如您在 mouseover 上看到的那样，我调用了 mouseOver 函数，这成功地将类添加到元素中。但是现在当用户离开元素时，类仍然存在。当用户离开元素时，如何删除类？感谢您的帮助。

【参考方案1】：

同时监听mouseover 和mouseout 并以此为基础设置类。

console.clear()

new Vue(
  el: "#app",
  data:
    isHovering: false
  
)

.hovering
  color: red

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <h1 @mouseover="isHovering = true" 
      @mouseout="isHovering = false" 
      :class="hovering: isHovering">
     isHovering ? "Woot! Hovered" : "Hover over me" 
  </h1>
</div>

或者只使用 CSS。

console.clear()

new Vue(
  el: "#app",
  data:
    isHovering: false
  
)

h1:hover
  color: red

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <h1 @mouseover="isHovering = true" 
      @mouseout="isHovering = false" >
     isHovering ? "Woot! Hovered" : "Hover over me" 
  </h1>
</div>

【讨论】：

但请记住，CSS OP 中有一个:hover。这完全是矫枉过正。所以.sign_up:hover color: red; 会更干净地给你同样的结果。

@BillCriswell 是的......这太有道理了:)

是的，这确实有道理。我只是想了解如何在 Vue 中做这样的事情。但是，是的，这可以更容易地完成。

又一次证明了当今 CSS 的强大！

【参考方案2】：

更可扩展的解决方案是使用指令：

// Directives
Vue.directive('add-class-hover', 
  bind(el, binding, vnode)     
    const  value=""  = binding;
    el.addEventListener('mouseenter',()=> 
        el.classList.add(value)
    );
    el.addEventListener('mouseleave',()=> 
        el.classList.remove(value)
    );
  ,
  unbind(el, binding, vnode) 
    el.removeEventListener('mouseenter');
    el.removeEventListener('mouseleave')
  
)

new Vue(
  el: "#app"
)

.hoverClass 
color: red;
font-weight: 700;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h1 v-add-class-hover="'hoverClass'">
    Text
  </h1>
</div>

【讨论】：

感谢这个不错的解决方案。对于解除绑定，移除事件监听器需要一个监听器作为第二个参数：developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

最后我的解决方案是在 unbind 处再次调用该方法： `` unbind(el, binding, vnode) el.removeEventListener('mouseenter', ()=> el.classList .add(value) ); el.removeEventListener('mouseleave', ()=> el.classList.remove(value) ) ``` 也许这仍然不是最好的，因为它仍然是一个匿名函数，请参阅：dev.to/em4nl/…

很高兴在 stackovervlow 上看到不同类型的解决方案，但根据我所学到的，像这样混合 vuejs 和 dom 操作是不好的做法。由于 vuejs 拥有自己的 dom 副本，这意味着您可能会遇到此类解决方案的问题。

【参考方案3】：

将以下内容添加到要在悬停时设置动画的 div 中：

@mouseover="isHovering = item.id" @mouseout="isHovering = false" :class="isHovering == item.id ? 'slower animated pulse' : ''"