【vue】vue +element 搭建项目,点击空白处关闭弹窗
<template>
<div class="step2">
<el-button @click="togglePanel($event)">点击</el-button>
<div class="shaw-box" v-if="visible" ref="main">弹出层</div>
</div>
</template>
<style>
.shaw-box{
width:200px;
height:200px;
border:1px solid red;
margin-top:10px;
}
</style> <script>
export default {
data() {
return {
visible:false,
}
},
methods: {
togglePanel (event) {
//阻止冒泡
event || (event = window.event);
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
this.visible ? this.hide() : this.show()
},
show () {
this.visible = true
document.addEventListener('click', this.hidePanel, false)
}, hide () {
this.visible = false
document.removeEventListener('click', this.hidePanel, false)
}, hidePanel (e) {
if (this.$refs.main && !this.$refs.main.contains(e.target)) {//点击除弹出层外的空白区域
this.hide()
}
},
},
beforeDestroy () {
this.hide()
}
}
</script>
作者:smile.轉角
QQ:493177502
【vue】vue +element 搭建项目,点击空白处关闭弹窗的更多相关文章
- 使用js冒泡实现点击空白处关闭弹窗
什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- jqeury点击空白关闭弹窗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用VUE CLI3.0搭建项目vue2+scss+element简易版
1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...
- vue.js + element 搭建后台管理系统 笔记(一)
此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...
- vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
- 【vue】vue +element 搭建项目,mock模拟数据(纯干货)
1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设 ...
- 【vue】使用vue+element搭建项目,Tree树形控件使用
1.依赖安装 本例中,使用render-content进行树节点内容的自定义,因此需要支持JSX语法.(见参考资料第3个) 在Git bash中运行一下指令 cnpm install\ babel-p ...
- 【vue】vue +element 搭建项目,vue-cli 如何打包上线
以自己的项目为例 第一步:手动修改config文件夹中的index.js文件中的build对象,将 assetsPublicPath 中的 “/” ,改为 “你实际的加载路径” 如图: 第二步:执行( ...
随机推荐
- 通过css3实现的动画导航菜单代码
用css3样式实现的滑动导航菜单,html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quo ...
- Angular6 项目开发常用时间组件服务
一.利用Angular 命令行工具生成一个服务. 详情见:<Angular环境搭建>,服务代码如下: import { Injectable } from '@angular/core'; ...
- react-fetch数据发送请求
在一个项目中,数据的请求发送数据是最为重要的,不可能我们的数据都是自己进行编写的 在react中官方推荐使用的方法是fetch.当然它里面也可以使用vue中的axios请求数据,jQuery的$.aj ...
- Flutter 布局(三)- FittedBox、AspectRatio、ConstrainedBox详解
本文主要介绍Flutter布局中的FittedBox.AspectRatio.ConstrainedBox,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. FittedBox Scale ...
- springboot 学习之路 2(注解介绍)
目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...
- UVA 1152 4 Values whose Sum is 0 (枚举+中途相遇法)(+Java版)(Java手撕快排+二分)
4 Values whose Sum is 0 题目链接:https://cn.vjudge.net/problem/UVA-1152 ——每天在线,欢迎留言谈论. 题目大意: 给定4个n(1< ...
- CSS杂谈(1)图
- 配置正确情况下,hadoop 没有namenode的一个解决方法
将hdfs里name与data清空,和将tmp清空 然后在hadoop目录下运行 hadoop namenode -format 启动 sbin/start-all.sh
- Oracle EBS FORM 更改记录状态
get到一个新的思路. 因为validate触发器是无法做go_block或者loop操作的,因此可以尝试修改数据块属性,将状态更新为改动的,触发 ON-UPDATE 触发器,将循环或者跳转语句加入到 ...
- SQL Server基础之表级触发器
触发器分为两种,一种与数据表绑定,响应数据表指定动作(insert.delete或update),此处称为表级:一种与数据库本身绑定,响应数据定义语句(主要是CREATE.ALTER 和 DROP 开 ...