描述。点击系统切换，弹出系统切换框。再次点击系统切换，隐藏。点击其他地方。也会隐藏

在layout.vue中写的html代码

1、在main.js中写入全局函数

// 定义全局点击函数,右侧系统切换点击其他地方隐藏系统切换菜单，在layout.vue中使用
Vue.prototype.globalClick = function (callback) {
document.onclick = function () {
callback();
};
};
2、在layout.vue中的js部分代码
mounted: function () {
// 调用切换菜单
this.globalClick(this.moreSetupMenuRemove);
},

methods:{　
moreSetupMenuRemove () {
if(this.isshow && this.istagetShow){
this.leave(document.getElementsByClassName("switch-system")[0]);
this.isshow = false;
this.istagetShow = false;
}else{
this.istagetShow = !this.istagetShow;
if(!this.isshow){
this.istagetShow=false;
}
}
},

toggle: function () {
this.isshow = !this.isshow;
},
leave: function (el, done) {
el.style= "right : -200px";
console.log("leave方法");
},
// 以下三个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行
// el:指的是当前调用这个方法的元素对象
// done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before执行完enter以后动画就会停止
beforeEnter: function (el) {
console.log("beforeEnter");
// 当入场之前会执行 v-enter
el.style = "right: -200px";
},
enter: function (el, done) {
console.log("enter");
// 为了能让代码正常进行，在设置了结束状态后必须调用一下这个元素的
// offsetHeight / offsetWeight 只是为了让动画执行
el.offsetHeight;
// 结束的状态最后啊写在enter中
el.style = "right: 0px";
// 执行done继续向下执行
done();
}

}

转载于:https://www.cnblogs.com/guoshuli/p/10001845.html

vue2.0实现点击后显示，再次点击隐藏相关推荐

  1. 纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单

    纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单 实现不联动的下拉菜单核心思想: input<type="checkbox">(复选框) label和in ...

  2. 点击按钮显示文字，再次点击隐藏文字

    点击按钮显示文字,再次点击隐藏文字 点击按钮显示文字,再次点击按钮隐藏文字 通过if条件判断css样式来做 <!DOCTYPE html> <html lang="en&q ...

  3. 小程序点击显示隐藏（点击标题，内容显示，再次点击隐藏，同时切换箭头的状态，且默认第一组的内容显示）

    哈喽,大家下午好,时间过的真快,转眼啊又好长时间没写博客啦,嘿嘿最近公司比较忙,手上一直有项目需要处理,现在终于空闲了一点,赶快来一篇呀,嘿嘿~ 最近我一直在做小程序的项目,其中值得一提的是项目中有一 ...

  4. 点击英文显示中文，再次点击隐藏中文

    点击英文显示中文,再次点击隐藏中文 代码 涉及方法 ➤ 根据className获取dom元素 ➤ js绑定点击事件 ➤ js获取当前dom元素的下一个元素 代码 <!DOCTYPE html&g ...

  5. vue2.0 路由不显示router-view

    今天学习vue2.0 的 router-view , 爆出的错误不计其数,不知道哪位大神写的router-view,配置的参数竟然不是router,而是routes =_=|| 这是花了一上午整出来的 ...

  6. vue2.0中的滚动问题--点击跳转到页面指定位置

    前言:我在项目中,需要实现一个发布评论,然后让页面滚动到发布评论的位置.之后百度了几种方法,一一验证之后都不能实现,下面将列出使用后出现的问题.以及自己的尝试. 1 - 3 这种方法得到的docume ...

  7. vue实现两重列表集合，点击显示，点击隐藏的折叠效果，（默认显示集合最新一条数据，点击展开，显示集合所有数据）...

    效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的  这个方法里传递的index 对应  isShow 数组里的index  ,对 ...

  8. 微信小程序利用hidden点击显示和点击隐藏

    view代码: <view bindtap="shghnn">点击显示/隐藏</view> <view class="a" hid ...

  9. js实现点击div隐藏相应部分，再次点击显示

    首先看一下html和css的结构: <style> #nav_left{width:120px;height:600px;background-color:#333;margin-left ...

最新文章

  1. Microsoft Visual C++ 14.0 is required. Get it with “Microsoft Visual C++ Build Tools解决方案
  2. vue + skyline 搭建 一个开发环境
  3. 零基础学习大数据：零基础学习大数据最完整的学习路线
  4. python怎么限制输出精度_谈谈关于Python里面小数点精度控制的问题
  5. welcome to my blog
  6. Redis持久化的几种方式——深入解析RDB
  7. 新手学Python， 如何从入门到入土变为从入门到快速上车？
  8. Nginx的启动阶段讲解
  9. php的冒泡排序的意思,冒泡排序是什么意思
  10. oracle查看asm磁盘,OracleOnLinux-Windows下如何查看ASM磁盘对应的设备
  11. 语义分割算法汇总（长期更新）
  12. 2021年中国商业银行企业避险业务分析：引导企业坚持汇率风险中性理念[图]
  13. 香槟分校计算机研究生专业,2019伊利诺伊大学香槟分校计算机专业申请要求
  14. 打印机 linux 共享文件夹,linux 连接windows打印机
  15. 手把手教你搭建 RabbitMQ 集群
  16. 「雕爷学编程」Arduino动手做（37）——MQ-3酒精传感器
  17. 【期权系列】期权市场 PCR 指标的策略应用
  18. KMP算法求循环节，为什么能求循环节
  19. 批量写入mysql数据库的Python脚本
  20. CPLEX for MAC 安装教程

热门文章

  1. charles工具页面介绍
  2. 列表list，元组tuple，字符串
  3. [置顶] java除0问题探究
  4. WCF中配置文件解析
  5. AgileEAS.NET SOA 中间件Web运行容器管理功能已全部开源，欢迎大家下载、使用、反馈...
  6. input标签与图片按钮水平对齐的解决方法
  7. 使用抓包工具fiddler和apipost进行接口测试
  8. 性能测试之JMeter取样器详解：sampler
  9. Spring MVC【入门】就这一篇！
  10. java se ee me都有什么区别？