<template>
<section class="base">
<ul>
<li v-for="(item, index) in 20" v-on:mouseenter="showDialog(index)" v-on:mouseleave="hideDialog(index)" :accesskey="index" style="position: relative;width: 100px;height: 50px;">
{{index}}
<!--操作蒙层-->
<div class="handleDialog" v-if="ishow && index==current"></div>
</li>
</ul>
</section>
</template>
<script>
export default {
data() {
return {
ishow: false,
current: 0, //当前操作按钮 };
},
methods: {
//显示操作项
showDialog(index, item) {
this.ishow = true;
this.current = index;
},
//隐藏蒙层
hideDialog(index, item) {
this.ishow = false;
this.current = null;
},
}
};
</script>
<style lang="less">
.handleDialog {
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
border-radius: 4px;
}
</style>

vue 鼠标移入移出 列表蒙层展示的更多相关文章

  1. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  2. vue 鼠标移入移出事件执行多次(尤其ie)

    来自:https://www.cnblogs.com/myfirstboke/p/9150809.html  侵删 <p @mouseover="over($event)" ...

  3. Vue中通过鼠标移入移出来添加或取消class样式(active)

     基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...

  4. 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. echarts+百度地图+vue 填坑记(一)(百度地图、鼠标移入移出标注,信息框会产生闪烁)

    大概七月底开始实习,到现在经历了两个完整的项目(c2b). 因为开发时间紧,任务重,所以在开发过程踩到的坑都没时间去记录. 现在在开发一个某链运输监控系统,到了收尾阶段,有时间写博客了!开心! 一.鼠 ...

  6. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  7. js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  8. # li鼠标移入移出,点击,变背景色,变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

  9. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

随机推荐

  1. 自己动手搭环境—unit 1、Struts2环境搭建

    1.web.xml中增加Struts2配置 <filter> <filter-name>struts2</filter-name> <filter-class ...

  2. stars-one原创工具——蓝奏云批量下载工具

    一款可以批量下载蓝奏云分享的文件夹下的所有文件 基于HtmlUnit和okhttp开源库,所以打包后的jar包文件有点大 蓝奏云下载地址 github地址 需求 之前找电子书资源的时候,网友分享的蓝奏 ...

  3. javascript DOM练习

    一.定时器 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...

  4. java.lang.UnsupportedOperationException: Manual close is not allowed over a Spring managed SqlSession

    java.lang.UnsupportedOperationException: Manual close is not allowed over a Spring managed SqlSessio ...

  5. 关于PDF阅读器

    获取流程 1.点击下载xodo 2.跳转到如下界面,单击箭头所指的版本: 3.单击转到 中国-中文 4.点击获取 5.在跳出来的界面点击红框 6.打开本机的Microsoft Store下载应用 介绍 ...

  6. Windows10 java环境配置

    1.下载 JDK 下载地址:https ://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 点击下载按钮 ...

  7. 微服务的多数据源配置: step 1

    spring boot + mybatis: 实现的功能点: 多数据源 jdbc: spring.datasource.test1.url = jdbc:mysql://localhost:3306/ ...

  8. web api 的 安全 认证问题 , 对外开放 的 时候 需要考虑到安全的问题

    关于 OWIN OAuth , web api的认证,全局验证, 安全方面的验证 有必要 去 自己捣鼓一下.

  9. LOJ6053 简单的函数

    题目传送门 分析: 对于这道题来说,当\(x\)为质数时: \(~~~~f(x)=x-1+2[x=2]\) 因为除2以外的质数都是奇数,它们与1异或就是减一,然后2就是加一 然后我们先来康康怎么快速求 ...

  10. Referer防盗链

    一.目录展示 分为AProject和BProject两个项目进行测试 二.修改c:\windows\system32\drivers\etc下的hosts文件 三.aindex.jsp 四.binde ...