鼠标事件

qq_41241767

于 2019-08-01 18:57:11 发布

阅读量99

点赞数

分类专栏： vue css js 前端知识文章标签：鼠标事件

本文链接：https://blog.csdn.net/qq_41241767/article/details/98090065

版权

vue 同时被 3 个专栏收录

60 篇文章 2 订阅

订阅专栏

前端知识

51 篇文章 0 订阅

订阅专栏

25 篇文章 0 订阅

订阅专栏

鼠标事件


    <div class="nav" @mouseover="mouseOut()"></div>
<li  class="yewu" ref="yewu" @mouseover="mouseOver()" @click="clickdown(2)" :style="{borderBottom:active==2?'2px solid #b81b22':'0'}"></li>

data() {
    return {
      //定义一下鼠标事件，否则会出现鼠标事件没有在原型链上定义的问题
      mouseover: "",
      mouseout: "",
      active:""
    };
  },
methods: {
    mouseOver: function() {
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
      this.$refs.downlist.style.display = "inline-block";
    },
    mouseOut: function() {
      this.$refs.downlist.style.display = "none";
    },
    none: function() {
      this.$refs.downlist.style.display = "none";
    },
    clickdown: function(x) {
      //点击那个标签哪个下面就变色
      sessionStorage.setItem("titleactive", x);
      this.active = x;
    }
}