vue 移动端 导航上关闭弹出层的实现，并且利用ref 的原理实现内部的状态回归false

最新推荐文章于 2024-03-06 10:16:53 发布
VIP文章 最新推荐文章于 2024-03-06 10:16:53 发布
阅读量340 收藏
点赞数 1
分类专栏： vue项目 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59519449/article/details/124119729
版权

效果图：

 ref 的原理：ref除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法

  思路:  在导航栏上的X icon 图标上，去绑定一个事件！！！在methods 方法里通过子传父的方法this.$emit 的方法，绑定事件，在父组件里绑定事件；还有绑定一个ref 的绑定，在methods 的方法里完成即可！！！

 

1.在导航栏上的icon 图标上绑定事件

2.在methods的方法里 使用this.$emit 的方法绑定一个自定义事件

最低0.47元/天 解锁文章
一染星辰
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue弹出菜单功能的实现代码
10-18
主要介绍了Vue左侧底部弹出菜单功能的实现代码,需要的朋友可以参考下
VUE调用子页面弹窗或组件弹窗，关闭弹窗刷新父级页面主页面，通过this.$emit来实现
小菜鸟的博客
10-14 8984
Vue 用this.$refs调用子页面窗口，关闭窗口用this.emit刷新父页面 this.$emit是父级向自己传值 第一步在父级页面创建自己页面的引用 <template> <div> <edit ref="edit" @refresh="search"></edit> //@refresh 这个命名可以自己改，edit是你子页面名字 ，search是我的方法名，ref就是我调用子页面弹窗的名字 </div> </t
Vue3学习日志（1）：const xxx = ref(false) 如何修改ref的值
最新发布
WangChen的博客
03-06 335
是 Vue 3 Composition API 中的一个引用（ref），它用于创建一个响应式的数据。是一个响应式引用，当你改变它的值时，任何依赖于这个值的组件或计算属性都会自动更新。的值，可以直接为其分配一个新的值。
VUE 通过ref 控制滚动条到底部&顶部
u013095204的博客
11-21 4151
开发业务中需要通过按钮点击增加输入栏，当过多时，新增的输入栏在最底部，这时直接控制滚动到底部可省去用户操作。
vue 中的 ref 的用法
m0_58893670的博客
02-24 686
1、基础用法：获取页面dom元素 <template> <div id="app"> <div ref="text">div盒子</div> <button @click="btn">获取div内容</button> </div> </template> <script> export default { methods: { btn() { co
【通俗易懂】vue实现tagsview标签导航栏切换菜单功能【详细注释，都能看的懂】
热门推荐
seeeeeeeeeee的博客
07-13 2万+
前言： 最近遇到后台管理系统要写一个tagsview形式的标签导航栏。然后我新手不了解怎么做的，就去百度搜了一下，看到的都是一大段代码，复制也不生效，也没有介绍说怎么用，也不说思路，完全看不懂，后来自己研究慢慢试错，也实现了部分主要功能，那我就来弄个通俗易懂版本，写的详细点，让小白都可以看懂怎么使用，直接复制就可以用 效果图 四步骤： 1，标签导航组件 2，主组件结构插入导航组件的位置 3，vuex内的数据存储 4，路由的注意项 思路： 通过vuex来让数据可以实时变动。根据路由的变化来判断是否高亮，通过
vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）
08-30
主要介绍了vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）,需要的朋友可以参考下
vue中实现弹出层动画效果的示例代码
10-14
主要介绍了vue中怎样实现弹出层动画效果，由上而下渐渐显示，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
在vue中实现点击选择框阻止弹出层消失的方法
10-18
今天小编就为大家分享一篇在vue中实现点击选择框阻止弹出层消失的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vueScroll实现移动端下拉刷新、上拉加载
10-17
主要介绍了vueScroll实现移动端下拉刷新、上拉加载，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
10-16
今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue关闭弹窗清空弹窗输入框中的内容
weixin_62328829的博客
10-29 4304
其实我们只需要在弹窗el-dialog上面@close="handleClose（这个随便起）"，然后在再methods中写上就好了。其实有两种方法一个是element组件中关于form表单中有这个清空的方法，第二个就是我接下来写的方法。关闭弹窗再次打开，还有刚刚输入的值，那么是不是就应该写个关闭弹窗时候的方法让他清空这个表单。我编辑之后点了确定，可是再次打卡这个弹窗时还是有我刚刚输入的数据。
vue中利用子组件的方式调用弹出层
u010086628的博客
05-23 699
1、在弹出层时做一个按钮，可以隐藏这个按钮，这个按钮的函数只是给父组件调用： 这里的this.dialogVisible = true;部分即显示这个子组件，在这里不能点击自己，所以这个按钮可以设置隐藏； 2、在父组件中注册： 3、在父组件中展示这个子组件，注意，在这里加上一个ref，父子组件才能调用它； 4、在父组件中调用： 这里的：this.$refs.viewsuser.showdialog()即调用子组件的函数； 5、显示结果 6、父子组件这样联动调用要使用到变量传递，方法有很多，可以百度
Vue + element-ui 【前端项目一】控制某个页面不显示导航栏 4
wgchen
09-30 1410
Vue + element-ui 【前端项目一】控制某个页面不显示导航栏 4
Vue3响应式原理-Ref
白开水的博客
04-10 1855
proxy代理的目标必须是非原始值，所以reactive不支持原始值类型。所以我们需要将原始值类型进行包装。
vue3使用中踩过的坑
qq_36987708的博客
02-17 944
vue3使用中踩过的坑
vue移动端关闭当前页面回到微信
李小乐er
11-25 2756
返回页面这个问题 当时打算使用window.close() 我自己的安卓手机 并没有退出当前主页面 回到企业微信 最终解决方法 WeixinJSBridge.call('closeWindow'); WeixinJSBridge是微信内置浏览器私有接口（注意：（WeixinJSBridge只能在微信内打开的网页有效）） ...
elementUI+vue实现商城分类导航弹出二级菜单悬浮展示（鼠标经过时显示）
qq_32886245的博客
03-09 6133
效果 二级菜单显示是用了elementUI的两个组件：el-tooltip + el-cascader-panel vue代码 <!-- 分类 --> <div class="category-box"> <span class="category-label">分类</span> <div class="flex-1"> <div class="category-list">
Vue关闭当前页面
fairy啊的博客
08-25 1万+
Vue关闭当前页面。
vue2实现Popup弹出层点击空白处关闭
06-09
在 Vue 2 中实现 Popup 弹出层点击空白处关闭的功能，可以通过以下步骤实现： 1. 在 Popup 组件中添加一个遮罩层，并绑定一个点击事件，当点击事件触发时，执行关闭 Popup 的方法。 2. 在子组件中添加一个 `$emit`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值