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的Document属性和方法小结
Sep 17 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
javascript实现留言板功能
Feb 08 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
最新最全的手机号验证正则表达式
Feb 24 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php提高网站效率的技巧
2015/09/29 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
django2 快速安装指南分享
2018/01/05 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
python如何查看安装了的模块
2020/06/23 Python
python 常见的反爬虫策略
2020/09/27 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
总务岗位职责
2013/11/19 职场文书
前台接待岗位职责
2013/12/03 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL