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 纯数字不重复排列的另类方法
Jul 17 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
javascript白色简洁计算器
May 04 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 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
ADODB的数据库封包程序库
2006/12/31 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
房屋出租协议书
2014/04/10 职场文书
产品开发计划书
2014/04/27 职场文书
电子专业自荐信
2014/07/01 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
2015年商场工作总结
2015/04/27 职场文书
史上最牛辞职信
2015/05/13 职场文书
加薪申请报告范本
2015/05/15 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
php 原生分页
2021/04/01 PHP
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Mysql 文件配置解析介绍
2022/05/06 MySQL