vue组件实现弹出框点击显示隐藏效果


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下

效果如下图

vue组件实现弹出框点击显示隐藏效果 

由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了。所以只能在弹出页面点击取消实现关闭隐藏弹出框。这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏。然后我就用的以下方法,希望可以帮到大家!!!

代码如下

1.在当前页面中(主页面)

<template>
 ......
 <ul>
 <li><span @click="ModifyPassword()">更改密码</span></li> //点击事件
 </ul>
 ......
 //组件传一个点击事件@hidden="hiddenShow",而这个点击事件就是下面的hiddenShow()函数
 <ModifyPassword @hidden="hiddenShow" v-show="ModifyPassword_pop_up"> </ModifyPassword> //调用组件
</template>
<script>
 import ModifyPassword from '@/components/pop-up/ModifyPassword.vue //引入组件
 export default {
 data(){
 return{
 date:'',
 ModifyPassword_pop_up:false,
 history_pop_up:false
 }
 },
 components:{
 ModifyPassword //引用组件
 },
 methods:{
 //更改密码弹出框显示(组件引用的弹出框)
 ModifyPassword(){
 this.ModifyPassword_pop_up=true
 },
 //更改密码弹出框隐藏(传给组件一个点击事件)
 hiddenShow(){
 let that = this;
 that.ModifyPassword_pop_up = false
 }
 }
 }
</script>

2.在弹出框组件页面中(更改密码)

<template>
 ......
 <div class="foot">
  <input type="button" name="OK" value="提交" class="yes" >
  //在取消按钮这里调用点击事件
  <input type="button" name="cancel" value="取消" class="no" @click="Hidden()">
  </div>
 ......
</ModifyPassword> 
</template>
<script>
 export default {
 data(){
 return{}
 },
 methods:{
 //本更改密码弹出框的显示隐藏事件
 Hidden(){
 //通过$emit引用组件传过来的hidden()事件
 this.$emit('hidden')
 }
 }
 }
</script>

虽然Vue 有很多UI组件。但是让内容比较多比较复杂的时候,还是需要自己写一个的。本案主要是运用了$emit监听,组件传事件。如果有更好的方案欢迎大家一起交流。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js图片延迟技术一般的思路与示例
Mar 20 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
Angular简单验证功能示例
Dec 22 Javascript
小程序实现留言板
Nov 02 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 #Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 #Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 #Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 #Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 #Javascript
React Native日期时间选择组件的示例代码
Apr 27 #Javascript
vue实现点击展开点击收起效果
Apr 27 #Javascript
You might like
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
使javascript也能包含文件
2006/10/26 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
require.js中的define函数详解
2017/07/10 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python中__call__用法实例
2014/08/29 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python中进程和线程的区别详解
2017/10/29 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
html5时钟实现代码
2010/10/22 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
学习作风建设心得体会
2014/10/22 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书