modal vue 关闭_Vue弹出框的优雅实践

引言

页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种做法的弊端.

  
@click="openModal()">点击 :is_open="is_open" @close="close()"/>
import Modal from "../components/Modal/Modal";//外部引入的弹出框组件export default { components: { Modal, }, data(){ return { is_open:false //控制弹出框关闭或打开 } }, methods: { openModal() { //显示弹出框 this.is_open = true; }, close(){ //子组件触发的事件,关闭弹出框 this.is_open = false; } },};

Modal是外部引入的弹出框组件,父组件通过is_open来控制弹出框的隐藏和显示.仔细分析上述结构存在的问题如下.

•Modal组件被硬编码,强行在父组件的components里面注册并在父组件的模板中渲染.设想一下,一个弹出框组件就需要在父组件中写一次,5个弹出框也都要在父组件的模板里写五个.这样会让父组件的页面结构变的复杂不利于阅读,其次弹出框组件应该与父组件解耦,它不应该写死在父组件的模板中.•父组件需要单独设置一个状态is_open来控制弹出框的显示和隐藏,假如父组件需要引入多个弹出框,那势必也要定义多个状态来对弹出框进行控制.

为了实现弹出框和父组件的解耦,最理想的方式是运用函数式编程的思想,在父组件内只需要调用一个函数就可以让弹出框显示出来,接下来看一下如何实现.

弹出框组件的处理

我们接下来实现一个代码十分简单但功能强大的工具函数,借助它就可以将弹出框组件封装起来.如果父组件需要使用哪个弹出框组件直接调用函数就能轻松显示或者隐藏.

实现

import Vue from 'vue';export const createModal = (Component, props) => {  const vm = new Vue({    render: (h) =>      h(Component, {        props,      }),  }).$mount();  document.body.appendChild(vm.$el);  const ele = vm.$children[0];  ele.destroy = function() {    vm.$el.remove();    ele.$destroy();    vm.$destroy();  };  return ele;};

Component就是父组件调用的弹出框组件,在这里作为参数传入.props是最终传递给弹出框组件内部的propsnew 一个 Vue实例,render属性对应的函数里,h的作用是将弹出框组件变成虚拟dom•$mount一定要调用,它会将虚拟dom转换成真实的dom元素•vm.$el就是对应到传入的弹出框组件Component所渲染的真实dom,将它挂载到body下面,此时页面就会显示出弹出框•光显示出弹出框还不够,我们还需要给弹出框组件创建一个销毁方法destroy,其中vm.$children[0]对应的就是弹出框组件的vue实例,可以调用destroy方法销毁.最后将该实例返回供外部调用,外部通过该实例就可以调用弹出框组件内部的属性和方法.

应用

作为测试Demo,弹出框组件结构如下,模板内容十分简单.渲染一个头部标题title和内容content.定义两个方法show()hide()来操作is_open状态来控制弹出框的显示和隐藏.

  
class="modal" v-if="is_open">
class="content">

class="close" @click="hide()">close

class="title">{{ title }}

{{ content }}
export default { props: ["title", "content"], data() { return { is_open: false, }; }, methods: { show() { this.is_open = true; }, hide() { this.is_open = false; }, },};lang="scss" scoped>.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); .content { width: 200px; height: 200px; background-color: #fff; margin: 0px auto; margin-top: 200px; text-align: center; font-size: 14px; color: #333; padding: 5px; .title { margin-bottom: 20px; font-size: 16px; } .close { text-align: right; } }}

页面组件

  
class="test-v2"> @click="openModal()">点击
import Modal from "../../components/Modal/Modal";import { createModal } from "../../util/Modal";export default { methods: { openModal() { this.ele = createModal(Modal, { title: "弹出框", content: "内容", }); this.ele.show(); } },};

页面父组件通过调用createModal方法能获取到弹出框组件Modal的实例this.ele.通过this.ele就可以拿到弹出框组件内部的所有属性和方法,包括显示show()和隐藏hide().

•经过上方一改造,实现了弹出框组件和父组件之间的解耦.弹出框组件不需要在父组件中注册和模板内渲染.•如果父组件需要传递数据给弹出框组件,可以借助createModal第二个参数对象,它最终会以props的形式注入到弹出框组件的内部.•show()hide()方法都是弹出框内部定义的,父组件可以直接调用控制其显示隐藏.另外页面销毁时要调用一次this.ele.destroy(),防止内存泄漏.

页面效果

73a3cbfaf6bc66f623ebc59e6156b104.png
在这里插入图片描述

从最终的dom结构图可以清晰的看到弹出框挂载在body的下面,而非页面组件内部.这样在对弹出框定义一些与css定位相关的样式时就轻松方便的多,不会受到页面组件的影响和干扰.

延伸

通过上面对弹出框的讲解我们还可以在此基础做很多其他的事情,比如对消息提示框的处理.

消息提示框也属于弹出框.最好的实践方式是,只需要写一行代码 Alert("Hello world"),页面上就会立马弹出消息提示 Hello world.效果如下.

d957223d1348c4de5de29fa86f110cbe.gif
在这里插入图片描述

实现

父页面结构如下,调用Alert()函数,页面就会显示提示框.

  
class="test-v2"> @click="alert()">Alert
import { Alert } from "../../util/Modal";export default { methods: { alert() { Alert("Hello world"); }, },};

Alert函数实现如下.

const alert_array = []; //用来存储弹出框的实例export const Alert = (msg, duration = 3000) => {  let top = 100; //默认距离顶部100px  if (alert_array.length > 0) {    const index = alert_array.length;    top = top + index * 50;  }  const ele = createModal(AlertComponent, {    title: msg,    top,  });  alert_array.push(ele);  const timer = setTimeout(() => {    clearTimeout(timer);    const index = alert_array.indexOf(ele);    index !== -1 && alert_array.splice(index, 1);    ele.destroy();  }, duration);};

AlertComponent是自定义的消失提示框组件(需要引入),调用createModal()获取每个提示框的实例存储在数组alert_array中.•点击一次按钮出现一个消息提示框,点击第二次按钮时,第二个提示框应该出现在第一个框的下面,因此需要根据数组alert_array动态计算绝对定位的top值,在创建弹出框实例时作为参数传进去.•定时器控制默认3秒后移除弹出框.

AlertComponent消息提示框组件内容如下.初始给top_value赋值this.top - 30,后来在mounted中再将this.top赋值一次,就是为了实现提示框出现时从上往下滑动的动画效果.

  
class="alert-component" :style="{ top: `${top_value}px`, opacity: opacity }" > {{ title }}
export default { props: ["title", "top"], data() { return { top_value: this.top - 30, opacity: 0, }; }, mounted() { const timer = setTimeout(() => { clearTimeout(timer); this.top_value = this.top; this.opacity = 1; }); },};.alert-component { height: 20px; border-radius: 4px; position: absolute; min-width: 300px; left: 50%; transform: translateX(-50%); background-color: #f0f9eb; color: #67c23a; align-items: center; padding: 10px 16px; transition: all 0.25s linear; opacity: 0;}

结尾

借助createModal工具函数,不仅可以做消息提示框,另外包括消息确认框,动态的表单模态框都可以实现进一步的封装简化处理.当弹出框与页面实现解耦后,整体的代码逻辑会变得更加清晰,对后期维护和扩展都有巨大的好处.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/453855.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 第三方模块之 lxml - 解析 HTML 和 XML 文件

lxml是python的一个解析库,支持HTML和XML的解析,支持XPath解析方式,而且解析效率非常高 XPath,全称XML Path Language,即XML路径语言,它是一门在XML文档中查找信息的语言,它最初是用来搜寻XML文…

(转)Linux下PS1、PS2、PS3、PS4使用详解

Linux下PS1、PS2、PS3、PS4使用详解 原文:http://www.linuxidc.com/Linux/2016-10/136597.htm 1、PS1——默认提示符 如下所示,可以通过修改Linux下的默认提示符,使其更加实用。在下面的例子中,默认的PS1的值是“\s-\v\$”,显示出…

开放平台大抉择

开放平台大抉择之新浪SAE:为个人应用开发带来福音 导读:继上期淘宝网副总裁王文彬从平台功能特色、运营状况等多方面分享了淘宝开放平台的历程和挑战之后。国内另一家云平台服务方的典型代表——Sina App Engine(简称SAE),作为新浪研发中心于…

ip68级防水可以泡多久_iPhone8防水级别升级至IP68:能在1.5米深水中坚持30分钟

1月15日,业界最新的泄密消息显示,苹果拟在今年推出的“iPhone 8”智能手机会是一款革命性的手机,功能和配置就不多说了。苹果还将解决iPhone 7的一个重要缺陷,就是大大增强iPhone 8的防水性能,防水级别达IP68。《韩国先…

HTTP POST 发送数据的参数 application/x-www-form-urlencoded、multipart/form-data、text/plain

HTTP 简介 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。 其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种方式。 我们知道,HTTP 协议是以 ASCII 码传输,建…

vue 二进制文件的下载(解决乱码和解压报错)

问题描述:项目中使用的是vue框架进行开发,因为文件下载存在权限问题,所以并不能通过 a 链接的 href 属性直接赋值 URL进行下载, (如果你的文件没有下载权限,可以直接通过href属性赋值URL的方法进行文件下载…

Python 第三方模块之 psutil - 获取系统运行的进程和系统利用率信息

一、psutil模块: 官方网址:http://pythonhosted.org/psutil/ 1.psutil是一个跨平台库(http://pythonhosted.org/psutil/)能够轻松实现获取系统运行的进程和系统利用率(包括CPU、内存、磁盘、网络等)信息。它主要用来做系统监控,…

石头机器人红灯快闪_机器人集体“快闪”活动爆红网络 “我是AI”与您相约智能新时代...

原标题:机器人集体“快闪”活动爆红网络 “我是AI”与您相约智能新时代3月10日下午,天津科学技术馆内,悠扬美妙的歌声《我和我的祖国》突然响起,随后50个身形矫健的阿尔法机器人伴随着歌声翩翩起舞,动作整齐、科技感十…

浅谈云计算与数据中心计算

文/林仕鼎 云计算概念发端于Google和Amazon等超大规模的互联网公司,随着这些公司业务的成功,作为其支撑技术的云计算也得到了业界的高度认可和广泛传播。时至今日,云计算已被普遍认为是IT产业发展的新阶段,从而被赋予了很多产业和…

无线网络实体图生成工具airgraph-ng

无线网络实体图生成工具airgraph-ngairgraph-ng是aircrack-ng套件提供的一个图表生成工具。该工具可以根据airodump工具生成的CSV文件绘制PNG格式的图。绘制的图有两种类型,分别为AP-客户端关联图和通用探测图。通过AP-客户端关联图,可以更为直观的了解无…

高等代数期末考试题库及答案_数学类高等代数期末考试试题A卷(含答案)

数学类高等代数期末考试试题A卷(含答案)课程编号MTH17063 北京理工大学2010-2011学年第一学期2009级数学类高等代数期末考试试题A卷班级 学号 姓名 成绩 一、(25分)设表示域上的所有阶矩阵构成的上的线性空间。取定,对于任意的,定义。(1)证明为上的一个线…

cocos2d-lua3.7组件篇(三)-http通信demo

客户端使用lua、服务端使用QT做为服务器。 步骤: 客户端 -----------Post 用户名和密码 服务端接受Post请求,读取数据,返回response一、客户端代码 loadingImg require"app.scenes.LoadingLayer"local LoginScene class(&qu…

数据挖掘:如何寻找相关项

导读:随着大数据时代浪潮的到来数据科学家这一新兴职业也越来越受到人们的关注。本文作者Alexandru Nedelcu就将数学挖掘算法与大数据有机的结合起来,并无缝的应用在面临大数据浪潮的网站之中。 数据科学家需要具备专业领域知识并研究相应的算法以分析对…

Python 第三方模块之 selenium - 模拟操作 Chrome 浏览器

1、安装selenium 1.1、Python 安装 selenium 模块 pip install selenium1.2、下载驱动 选择和自己chrom版本相对应的驱动到本地,下载地址 http://npm.taobao.org/mirrors/chromedriver/2、Python 操作 from selenium import webdriver import time import json…

jupyter notebook代码导出_Jupyter Notebook导出包含中文的pdf_亲测有效

Jupyter Notebook是很好的数据科学创作环境,是非常方便的Python代码编辑器。jupyter提供导出的格式有.py、.html、.md、.pdf等。目前用其导出包含中文的pdf会遇到很多坑,网上也有一些解决方案,大致分为两种方式,一是安装 pandoc并…

前端之使用 POST 提交数据并跳转

GET 方式 window.location.href是我们常用来在js中实现页面跳转的方法,这是使用get方式发送请求,示例如下 window.location.href url;优点是简单易用,缺点是如果有参数的话,参数会暴露在url地址中,这降低了系统的安…

cef js返回c++的代码_CEF3开发者系列之外篇——IE中JS与C++交互

使用IE内核开发客户端产品,系统和前端页面之间的交互,通常给开发和维护带来很大的便利性。但操作系统和前端之间的交互却是比较复杂的。具体来说就是脚本语言和编译语言的交互。在IE内核中html和css虽然不兼容,但是IE编程接口是完全一样的,这得益于微软的…

多线程编程指南 part 2

多线程编程指南Sun Microsystems, Inc.4150 Network CircleSanta Clara, CA95054U.S.A.文件号码819–7051–102006 年10 月版权所有2005 Sun Microsystems, Inc. 4150 Network Circle, Santa Clara, CA95054 U.S.A. 保留所有权利。本文档及其相关产品的使用、复制、分发和反编译…

00030_ArrayList集合

1、数组可以保存多个元素,但在某些情况下无法确定到底要保存多少个元素,此时数组将不再适用,因为数组的长度不可变 2、JDK中提供了一系列特殊的类,这些类可以存储任意类型的元素,并且长度可变,统称为集合 3…

1.3tf的varible\labelencoder

1.tf的varible变量 import tensorflow as tf #定义变量--这里是计数的变量 statetf.Variable(0,namecounter) print (state.name) #输出变量值 onetf.constant(1) #常量new_valuetf.add(state,one) updatetf.assign(state,new_value)#初始化所有变量 inittf.initialize_all_var…