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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
JavaScript 基础问答三
Dec 03 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php目录拷贝实现方法
2015/07/10 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
anaconda如何查看并管理python环境
2019/07/05 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
天游软件面试
2013/11/23 面试题
中科前程Java笔试题
2016/11/20 面试题
初一英语教学反思
2014/01/11 职场文书
心理学专业求职信
2014/06/16 职场文书
动物科学专业求职信
2014/07/27 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers