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 相关文章推荐
Knockoutjs快速入门(经典)
Dec 24 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 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动态创建Flash动画
2006/10/09 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php中的常用魔术方法总结
2013/08/02 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
javascript 写类方式之一
2009/07/05 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
python实现的重启关机程序实例
2014/08/21 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python实现最短路径的实例方法
2020/07/19 Python
Python Django路径配置实现过程解析
2020/11/05 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
英国假发网站:Hothair
2018/02/23 全球购物
类和结构的区别
2012/08/15 面试题
个人自我鉴定总结
2014/03/25 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python