vue项目点击外部组件消失

最新推荐文章于 2023-05-13 14:29:50 发布
最新推荐文章于 2023-05-13 14:29:50 发布
阅读量663 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ducaijia_123/article/details/93776408
版权

 mounted(){
        document.body.addEventListener('click',()=>{
            this.isShow = false;
        },false);
    }

ducaijia_123
关注
VUE—封装弹窗组件并且点击空白出消失
Poppy_LYT的博客
04-22 986
封装弹窗的vue页面 起名叫PosterModal <div v-if="visible" class="modal-mask" catchtouchmove='true' @click="closeModal"> <div class="modal-content" @click.stop="openModal”> // .stop阻止冒泡 </di...
点击其他地方弹层消失
sinat_24496253的博客
02-10 1022
点击其他地方弹层消失 body,html{ width:100%; height:100%; } .opciaty{ width:200px; height:200px; background:#000; opacity:0.5; filter:alpha(opacity=5); position:absolute; top:50%; left:50%; margi
基于Vue中点击组件外关闭组件的实现方法
11-29
Vue定义全局点击函数，参数为点击的回调函数。 Vue.prototype.globalClick = function (callback) { //页面全局点击 $(document).click(callback); } 组件挂载后监听全局的点击事件 mounted:function () { this.globalClick(this.handleClickOut); }, 隐藏元素。 取到dom节点，判断父级是否存在来判断是否需要来关闭 handleClickOut:function (event) { if($(event.target).parents(".sys-a
vue中点击弹框或下拉之外的地方 弹框下拉消失
qq_42257741的博客
01-14 738
html 板块： <div ref="select"></div> js 板块： mounted()=>{ document.addEventListener('click',(e) => { if(this.$refs.select.contains(e.target)) return this.show = false }) } 为你的弹框或者下拉选
Vue v-model组件封装(类似弹窗组件)
10-15
在这个例子中，`prop` 设置为 `'checked'`，意味着外部组件通过 `checked` 属性传递值；`event` 设置为 `'change'`，表示当值改变时，组件会触发 `'change'` 事件并传递新的值。 现在，让我们转向封装一个类似弹窗...
Vue自定义toast组件的实例代码
10-18
在实现时，加载组件需要能够展示加载动画，并且在指定的duration时间后自动消失。 接下来，需要创建一个index.js文件来完成Toast组件的实例化。在这个文件中，首先导入了Vue核心库和Toast组件，然后定义了...
基于Vue2x的picker组件
08-12
6. **过渡效果**：Vue2.x 提供了内置的过渡效果库，可以为组件的出现和消失添加动画。`picker`组件在打开和关闭时可能需要这些过渡效果。 7. **自定义指令**：如果需要更复杂的交互，可以定义自定义指令，如用于...
基于Vue的Toast提示框
05-27
对于更小规模或者特定需求的项目，开发者可能选择创建自己的Toast组件，这将涉及到Vue的组件化思想和生命周期方法。 首先，要理解Vue的组件化思想。Vue组件是可复用的代码块，可以独立完成一部分功能，比如显示一个...
下拉组件点击组件外关闭的方法
qq_43265785的博客
06-18 258
下拉组件点击组件外关闭的方法 代码结构 主要代码 document.body.addEventListener('click', () => { this.isShow = false }, false)
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
10-14
主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue点击其他地方让弹框消失的功能怎么写
weixin_51747462的博客
04-20 1110
vue点击其他地方让弹框消失的功能怎么写；vue用@blur事件让弹框消失的功能怎么写
实例：vue中点击空白区域关闭某个div图层
weixin_30621919的博客
05-25 732
<template> <div class="search" ref="searchMain"> <el-input v-model="value" placeholder="请输入搜索内容" ref="input" @focus="getFocus" @input="changeVal" @clear='...
在Vue中点击某个元素以外的元素时让这个元素隐藏或关闭
qq_59224656的博客
05-13 1552
在实际开发中，可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。为全局document添加click事件，判断是否为指定节点及其子节点，如果不是则隐藏该指定节点。为span加上ref 以便于获取该DOM节点。
VUE的对话框el-dialog点击外部消失问题
程序大视界
05-19 5808
close-on-click-modal
Vue鼠标点击事件和键盘事件
weixin_57663206的博客
02-19 6372
Vue鼠标点击事件和键盘事件
vue.js实现点击按钮和弹出层其他位置弹出层消失方法
热门推荐
q479902964的博客
06-06 2万+
这其实是一个很常见的弹出层效果，鼠标点击按钮切换弹出层的显示，点击其他区域弹出层消失，用javascript绑定事件可能几行代码就搞定了，但是vue.js的状态驱动模式和javascript的事件驱动模式是不同的，下面是使用vue.js的实现方式：鼠标点击button会切换一个布尔值show，用show来控制弹出层的显示，而包裹着&lt;transition&gt;标签的弹出层在show的状态改变...
Vue下拉框点击选中，点击其他区域消失
后知后觉
06-29 7759
vue-cli中实现下拉框点击其他区域消失   排序      {{sort}}选中显示   export default {   name: 'hello',   data () {     return { show: false       activeName:'',       sorts :{         "defa
vue3 组件过渡效果
最新发布
09-16
要使用 `<transition>` 组件，你需要在组件外部包裹该组件，并使用 `v-if` 或 `v-show` 来控制组件的显示和隐藏。 下面是一个示例代码，展示了如何使用 `<transition>` 组件来实现渐变过渡效果： ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值