vue中自动失去焦点_vuejs 失去焦点,单击全局隐藏某些浮动元素

先看图,

我们想实现一个这样的功能, 单击高级搜索,弹出一个div,div里面是slot进去的,有各种标签,包括表单元素。再单击其他区域,会隐藏这个弹出的div,类似blur事件。

麻烦给点思路实现这个组件(功能), 写一个这样的组件,弹出框的内容slot进去,里面的表单可以进行操作输入,以及动态渲染dom结点。

请问有朋友实现过类似的功能吗,麻烦给点思路。

主体上可以看这个vue-weui,对于点击slot区域外,自动关闭弹出框,基本的方法可以是

1.在slot外包裹一个div,position为relative,z-index设置为高于透明遮罩层即可。

2.在点击高级搜索时,在body下append一个透明遮罩层,遮罩层z-index低于弹出的sloat,设置透明遮罩层的click事件为关闭slot。

//html

<div v-show="isShowDialog">

//js

document.addEventListener('click', (e) => {

if (!this.$el.contains(e.target)) this.isShowDialog = false;

})

我的方案是给document一个点击事件关闭这个弹窗,然后给这个div一个阻止冒泡

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值