html5点击空白处,vue中点击空白处隐藏弹框（用指令优雅地实现）

备注：20190717

这个方法目前发现是有问题的，我在做新的vue的项目时，发现这个方案是有问题的，在前一个项目时没有问题，现在的这段时间的这个项目有问题：

1.实现不了点击一个按钮弹出一个弹框，点击弹框外的位置关闭弹框的需求，究其原因，就是点击按钮的时候就相当于点击了弹框外的地方，找到原因后，就可以快速废弃这个方法。

2.扩展，实现不了

正确解决方案：请点击：

在写vue的项目的时候，弹框经常性出现，并要求点击弹框外面，关闭弹框，那么如何实现呢？且听我一一。。。不了，能实现效果就好

const clickoutside = {

// 初始化指令

bind(el, binding, vnode) {

function documentHandler(e) {

// 这里判断点击的元素是否是本身，是本身，则返回

if (el.contains(e.target)) {

return false;

}

// 判断指令中是否绑定了函数

if (binding.expression) {

// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法

binding.value(e);

}

}

// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听

el.__vueClickOutside__ = documentHandler;

document.addEventListener('click', documentHandler);

},

unbind(el, binding) {

// 解除事件监听

document.removeEventListener('click', el.__vueClickOutside__);

delete el.__vueClickOutside__;

},

};

export default {

name: 'HelloWorld',

data() {

return {

show: true,

};

},

directives: {clickoutside},

methods: {

handleClose(e) {

this.show = false;

},

},

};

.show {

width: 100px;

height: 100px;

background-color: red;

}

就是方便你们拷贝的。

思路：

我最初的应对思路是给弹框的其余区域加点击事件，点击之后关闭弹框，用了百分比布局。(当然low爆了)。

时间充裕的时候，就研究使用了这种方法，是否更高级呢，反正我觉得方便多了啊

简单介绍用到了的两个vue指令

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

unbind：只调用一次，指令与元素解绑时调用。

react 点击空白处隐藏弹出层

点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

android中点击空白处隐藏软键盘

InputMethodManager manager manager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERV ...

jquery实现点击页面空白处，弹框消失

要求:点击1,弹框2显示,点击空白处,弹框2消失 $("#AddDevices"):按钮1 $(".addDeviceBox")弹框2 //点击添加设备弹框 $ ...

js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

jquery实现点击按钮弹出层和点击空白处隐藏层

昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

IOS Swift UITableViewcontroller实现点击空白处隐藏键盘

在ios开发中,为了方便,我们经常使用UITableViewcontroller,比如搜索界面为了方便可能更多的使用UITableViewcontroller,那么问题就来了,当我点击搜索框的时候会弹 ...

【Flutter 实战】全局点击空白处隐藏键盘

老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘. 对于单个页面来说,通过为 T ...

IOS 点击空白处隐藏键盘的几种方法

IOS 点击空白处隐藏键盘的几种方法     IOS7 点击空白处隐藏键盘的几种方法   IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能 ...

IOS7 点击空白处隐藏键盘的几种方法

IOS7 点击空白处隐藏键盘的几种方法   iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们 ...

随机推荐

SQL优化 查询语句中，用 inner join 作为过滤条件和用where作为过滤条件的区别

前段时间遇到一个存储过程,参数之一是一个字符串,在存储过程中,把字符串拆分成一个临时表之后存为一个key值的临时表,作为其中一个查询条件, 逻辑实现上有两种处理方式 insert into #t se ...

easyui datagrid 点击表头的事件

在用datagrid的时候我们可能要用到点击表头来触发一个function,这里有个简单的例子. 首先你得有个能用的datagrid.