点击非组件任意地方 隐藏组件

最新推荐文章于 2023-10-22 10:59:42 发布
最新推荐文章于 2023-10-22 10:59:42 发布
阅读量472 收藏
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42359718/article/details/105381389
版权 
在mounted 中绑定函数



在组件page 上绑定 ref 获取组件

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

    if(this.$refs.transfer){

        if(!this.$refs.transfer.contains(e.target)){
    
            this.showTransfer = false;

        }

    }

})

 

东湖高新第一会所掌门人
关注
vue：动态组件——实现当点击一个按钮时，显示相应的div，并将其他div都隐藏起来
yyyyyyyyyyy_9的博客
09-08 1415
乐多_通过动态组件 () 来实现当点击一个按钮时，它将显示相应的，并将其他都隐藏起来。
火狐Android 附加组件,Firefox Nightly 隐藏新功能，让 Android 机用上任意桌面端附加组件...
weixin_33476081的博客
05-25 6072
虽说目前 Android 平台基本上都是 Chromium 内核浏览器一统天下，相比桌面端，移动版浏览器的网页浏览器在功能性上依然有着差距，比如目前依然只有小部分移动端浏览器支持安装扩展程序/附加组件。不过对于一直以来都采用自家内核的 Firefox 来说，Android 的开放性使得它可以较为容易将自家桌面端浏览器功能移植到移动端，这当中自然也包括了 Firefox 最为关键的浏览器附加组件(也...
点击元素以外的地方隐藏元素插件
03-28
clickOutHide，点击元素以外的地方隐藏元素jQuery插件。能够支持忽略部分元素的配置，灵活方便。
【uni-app】点击显示和隐藏操作按钮
得意小门生的博客
08-15 1万+
效果说明：点击当前项显示操作列表，点击其他项先隐藏其他操作在显示当前的操作。点击最外层隐藏所有操作。 <template> <view class="wrap" @click="hideIsShow"> <view class="list"> <view class="item flex justify-between" v-for="(item, index) in list" :key="index"> <view class=
uniapp实现登录组件之外区域置灰并引导登录
最新发布
weixin_43401380的博客
10-22 820
置灰区域添加点击事件提示登录.最开始想的方式是点击任意置灰区域提示登录,但是发现点击事件不生效,所以换了一种实现方式,将登录提示处理放到父页面的功能按钮点击事件中,父组件引用子组件,根据登录组件是否显示调用子组件中提示登录的逻辑.登录组件不显示,父组件点击功能按钮跳转到对应页面,登录组件显示,点击功能按钮提示登录.设置登录组件背景颜色为灰色,将页面分成登录区域(底部)和非登陆区域(上面灰色显示部分),以上是实现过程,希望对有同样需求的同学有所帮助!
VUE和uniapp中点击其他区域关闭弹窗
weixin_47796185的博客
04-24 7490
VUE中点击其他区域关闭弹窗 废话不多说 上代码 首先是静态页面代码: <view id="more-oprate" class="kuang" v-show="kuangshow" @click="closeMsg"> <view class="kuang_box" v-show="canvas1"> <text class="fon_18 Lh_40 show mb_10 strong">产品海报</text> <imag
uniapp点击某区域触发一个事件，点击某区域外触发另一个事件
Mybabyying的博客
07-15 8530
<template> //最外部定义一个事件external <view style="width:100vw;height:100vh" @click="external"> //触发区域 <view style="width:200rpx;height:200rpx;background-color:red" @click.stop="interior"><view> </template> export default { da.
React项目点击其他任意地方隐藏当前DIV
Lucivita的博客
12-15 2813
1、在父子div中添加id，在父div中添加点击事件 2、子div使用三元判断的形式是否显隐 3、通过父元素点击事件判断是否点击的在子id区域，不是则隐藏 （4、由于我是结合选项Cascader级联选择判断Checkbox多选框是否显隐，隐藏为了避免点完选项直接消失可以再加一个判断，默认为false，选完之后为ture，然后如果点击区域外则把判断显隐的标识为ture的同时在让这个额外的判断为false） 以下只列出了关键代码，其余部分功能代码省略，只是实现思路，不可直接使用！！！ //sta.
微信小程序自定义下拉框，点击空白处隐藏
07-31
在微信小程序开发中，创建一个自定义的下拉框并实现点击页面空白区域时自动隐藏是常见的需求。这个功能能够提升用户体验，使交互更加简洁高效。以下将详细讲解如何实现这一功能。 首先，我们需要理解微信小程序的...
点击盒子之外的地方 隐藏盒子（类似弹层）
weixin_44204426的博客
08-03 739
一、实现思路 使用蒙层，点击蒙层，使盒子隐藏 二、demo(以微信小程序为例) pages/test/test.wxml: <view class="mask" bindtap="hHide"> <view class="inner" wx:if="{{ show }}"> 123 </view> </view> pages/test/test.wxss: .mask{ position: absolute; left: 0; r
触摸除输入框以外的其它区域自动隐藏软键盘
08-31
仿微信 - 触摸除输入框以外的其它区域自动隐藏软键盘
微信小程序动态的显示或隐藏控件的方法(两种方法)
08-31
在微信小程序开发时，经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况，下面就来实践一下吧
uni-app实现点击显示隐藏列表，兼容微信小程序
总结前端开发中遇到的问题，分享前端知识
08-30 1461
uni-app显示隐藏功能，兼容小程序。
uniapp、微信小程序：点击空白/蒙版关闭弹窗
Shimeng_1989的博客
11-04 7228
uniapp、微信小程序：点击空白/蒙版关闭弹窗
除指定区域外点击任何地方隐藏DIV
Bright2017的博客
12-15 971
方式一: &lt;div class="btn" id="btn"&gt;btn&lt;/div&gt; &lt;div class="box"&gt;&lt;/div&gt; $('.btn').on('click',function(e){ $('.box').show(); e.stopPropagation(); }) $('body').on('clic
小程序：点击外部关闭弹窗
Lovely Ruby 的手账
08-13 3495
演示 思路 其实利用了冒泡的原理，通过阻止冒泡，来使点击内部的时候，不触发外部的时间（阻止冒泡，可以用e.stopPropagation()），点击外部的时候，触发事件。 代码 这里我使用的是 mpvue，理解思路才比较重要 <template> <div v-if="showFloat" @click="controlShowFloat('notShow')"> <div @click.stop="controlShowFloat('show')">
小程序弹层点击其他位置 隐藏 点击相应位置发生点击事件
Mr_wuying的博客
05-31 8034
上面的选择列表弹出后出现弹框，点击列表的按钮以外区域隐藏弹框遮罩层。 <view bindtap="hideIcon"> <view class="navList {{navList==true?'navListActive':''}}"> <view class="nav {{navList==true?'navNew':''}}" hover-stop...
uni-app监听页面内滑动
CN_wangsanhua的博客
05-30 1948
uni-app 中监听触摸事件，滑动事件 手指滑动事件关键点在于三个事件： 1、@touchstart ：触摸开始； 2、@touchmove：手指滑动的过程； 3、@touchend：触摸结束，手指离开屏幕。 <view class="margin-top-sm showMore-box" :style="{ transform: 'translateX('+moveX+'px)', transition: transition }" @touchstart="start"
uniapp中开发小程序使用ref获取dom实例，一直显示undefined，竟然发现是这个原因！
热门推荐
柑橘乌云_
04-15 1万+
uniapp使用ref获取dom实例是undefined，ref获取不到dom实例
Vue2.0封装自定义Model组件实战
3. 共性需求 - 包括标题显示、关闭按钮以及点击遮罩层或关闭按钮可以隐藏模型组件。 设计方案： 1. Prop传参 - 通过props传递必要的参数，如`title`（标题）、`show`（显示/隐藏状态）、`width`（宽度）和`type`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值