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

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

效果如下图

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

代码如下

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

......

更改密码 //点击事件

......

//组件传一个点击事件@hidden="hiddenShow"，而这个点击事件就是下面的hiddenShow()函数

//调用组件

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

}

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

......

//在取消按钮这里调用点击事件

......

export default {

data(){

return{}

methods:{

//本更改密码弹出框的显示隐藏事件

Hidden(){

//通过$emit引用组件传过来的hidden()事件

this.$emit('hidden')

}

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果相关推荐

无界微前端（wujie）：element-ui 弹框内使用select组件，弹出框位置异常解决方案
element-ui 弹框内使用select组件,弹出框位置异常解决方案只需三步,第一步: 将子应用将 body 设置为 position: relative 第二步: 在子应用的html上设置个 ...
c语言获取安卓弹窗,Android实现信息弹出框
本文实例为大家分享了Android实现信息弹出框的具体代码,供大家参考,具体内容如下 layout下的dialog_common_layout.xml android:layout_width=&qu ...
axure 点击按钮弹出框_Axure动态面板教程：弹出框效果的制作
作为一名互联网产品设计人员,相信很多同行每天上班电脑上都会运行着一个软件--Axure,她能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成 ...
python编写弹出输出框_PyThon GUI教程：编写弹出框
PyThon语言相较于Java语言是非常容易上手的,小编最开始作为Java的学习者,对编写弹出框印象深刻,然而使用python编写弹出框更为简单,一起来看看吧~ 下载easy gui包: 1)在pyt ...
前端把信息放在弹框里显示出来_jsp + js + 前端弹出框
在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框代码: var a = "Hello ...
纯html点击按钮弹出表单,Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如 ...
python如何判断是否有弹出框_Selenium2+python自动化47-判断弹出框存在(alert_is_present)【转载】...
前言系统弹窗这个是很常见的场景,有时候它不弹出来去操作的话,会抛异常.那么又不知道它啥时候会出来,那么久需要去判断弹窗是否弹出了. 一.判断alert源码分析 class alert_is_pres ...
VUE|利用父子组件制作弹出框
博客主页:JavaProfessional 一个专注于Java的博主,致力于使用通俗易懂的语句讲解内容,期待您的关注! 文章目录点击显示弹框父组件子组件点击关闭弹框子组件父组件效果好文 ...
element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭问题
先说定位问题如果往里边动态添加内容,定位偏移下面是解决办法: 绑定ref,最关键的是有这行代码 :popper-options="{ boundariesElement: 'viewpo ...

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

vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果相关推荐

最新文章

热门文章