vue鼠标悬停出现悬浮框
之前遇到一个需求,电商主页中鼠标悬停到某个a标签上面,下面就会出现一个div框,里面有各种选项。这里的主要问题是,如何做到鼠标悬停出现下拉框,并且鼠标移走下拉框和标签后下拉框消失。网上有很多做法,有的是使用v-if判断做的(不靠谱),有的是说延迟几毫秒后判断是否在div框上,如果在,则不消失,如果不在,则消失(有点麻烦)。后来我又测试了几个最终我认为还不错又简单的(之前都想的太复杂,原谅我的无知)
·
之前遇到一个需求,电商主页中鼠标悬停到某个a标签上面,下面就会出现一个div框,里面有各种选项。这里的主要问题是,如何做到鼠标悬停出现下拉框,并且鼠标移走下拉框和标签后下拉框消失。网上有很多做法,有的是使用v-if判断做的(不靠谱),有的是说延迟几毫秒后判断是否在div框上,如果在,则不消失,如果不在,则消失(有点麻烦)。后来我又测试了几个最终我认为还不错又简单的(之前都想的太复杂,原谅我的无知),上代码。
创建一个vue文件把大概模板(具体模板我就不写了)弄好之后写两个同级div,其中一个为标签,另一个为下拉框。
<div class="link" @mouseenter="enter" @mouseleave="leave">移入鼠标悬浮</div>
<div class="suspendiv" @mouseover="mouseover" @mouseleave="leave">这里是悬浮的框</div>
css样式(下拉框)
.suspendiv{
width: 100px;
height: 100px;
display: none;
position: absolute;
border: 1px solid #cccccc;
}
vue实例中methods写三个方法
enter: function() {
$(".suspendiv").css('display', 'block')
},
leave: function () {
$(".suspendiv").css('display', 'none')
},
mouseover:function () {
$(".suspendiv").css('display', 'block')
}
是不是很简单。有没有更优的方法还请赐教。
更多推荐
已为社区贡献2条内容
所有评论(0)