关于vue.js弹窗组件的知识点总结


Posted in Javascript onSeptember 11, 2016

首先在开发时需要考虑以下三点:

     1、进入和弹出的动画效果。

     2、z-index 的控制

     3、overlay 遮盖层

关于动画

vue 对于动画的处理相对简单,给组件加入css transition 动画即可

<template>
<div class="modal" transition="modal-scale">
 <!--省略其它内容-->
</div>
</template>
<script>
// ...
</script>
<style>
.modal-scale-transition{
 transition: transform,opacity .3s ease;
}

.modal-scale-enter,
.modal-scale-leave {
 opacity: 0;
}

.modal-scale-enter {
 transform: scale(1.1);
}
.modal-scale-leave {
 transform: scale(0.8);
}
</style>

外部可以由使用者自行控制,使用 v-if 或是 v-show 控制显示

z-index 的控制

关于z-index的控制,需要完成以下几点
     1、保证弹出框的 z-index 足够高能使 其再最外层

     2、后弹出的弹出框的 z-index 要比之前弹出的要高

要满足以上两点, 我们需要以下代码实现

const zIndex = 20141223 // 先预设较高值

const getZIndex = function () {
 return zIndex++ // 每次获取之后 zindex 自动增加
}

然后绑定把 z-index 在组件上

<template>
<div class="modal" :style="{'z-index': zIndex}" transition="modal-scale">
 <!--省略其它内容-->
</div>
</template>
<script>
export default {
 data () {
  return {
   zIndex: getZIndex()
  }
 }
}
</script>

overlay 遮盖层的控制

遮盖层是弹窗组件中最难处理的部分, 一个完美的遮盖层的控制需要完成以下几点:

     1、遮盖层和弹出层之间的动画需要并行

     2、遮盖层的 z-index 要较小与弹出层

     3、遮盖层的弹出时需要组件页面滚动

     4、点击遮盖层需要给予弹出层反馈

     5、保证整个页面最多只能有一个遮盖层(多个叠在一起会使遮盖层颜色加深)

为了处理这些问题,也保证所有的弹出框组件不用每一个都解决,所以决定利用 vue 的 mixins 机制,将这些弹出层的公共逻辑封装层一个 mixin ,每个弹出框组件直接引用就好。

vue-popup-mixin

明确了上述所有的问题,开始开发 mixin, 首先需要一个 overlay (遮盖层组件) ;

<template>
 <div class="overlay" @click="handlerClick" @touchmove="prevent" :style="style" transition="overlay-fade"></div>
</template>
<script>
export default {
 props: {
 onClick: {
  type: Function
 },
 opacity: {
  type: Number,
  default: 0.4
 },
 color: {
  type: String,
  default: '#000'
 }
 },
 computed: {
 style () {
  return {
  'opacity': this.opacity,
  'background-color': this.color
  }
 }
 },
 methods: {
 prevent (event) {
  event.preventDefault()
  event.stopPropagation()
 },
 handlerClick () {
  if (this.onClick) {
  this.onClick()
  }
 }
 }
}
</script>
<style lang="less">
.overlay {
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 background-color: #000;
 opacity: .4;
 z-index: 1000;
}


.overlay-fade-transition {
 transition: all .3s linear;
 &.overlay-fade-enter,
 &.overlay-fade-leave {
 opacity: 0 !important;
 }
}
</style>

然后 需要一个 js 来管理 overlay 的显示和隐藏。

import Vue from 'vue'
import overlayOpt from '../overlay' // 引入 overlay 组件
const Overlay = Vue.extend(overlayOpt)

const getDOM = function (dom) {
 if (dom.nodeType === 3) {
 dom = dom.nextElementSibling || dom.nextSibling
 getDOM(dom)
 }
 return dom
}

// z-index 控制
const zIndex = 20141223 

const getZIndex = function () {
 return zIndex++ 
}
// 管理
const PopupManager = {
 instances: [], // 用来储存所有的弹出层实例
 overlay: false,
 // 弹窗框打开时 调用此方法
 open (instance) {
 if (!instance || this.instances.indexOf(instance) !== -1) return
 
 // 当没有遮盖层时,显示遮盖层
 if (this.instances.length === 0) {
  this.showOverlay(instance.overlayColor, instance.overlayOpacity)
 }
 this.instances.push(instance) // 储存打开的弹出框组件
 this.changeOverlayStyle() // 控制不同弹出层 透明度和颜色
 
 // 给弹出层加上z-index
 const dom = getDOM(instance.$el)
 dom.style.zIndex = getZIndex()
 },
 // 弹出框关闭方法
 close (instance) {
 let index = this.instances.indexOf(instance)
 if (index === -1) return
 
 Vue.nextTick(() => {
  this.instances.splice(index, 1)
  
  // 当页面上没有弹出层了就关闭遮盖层
  if (this.instances.length === 0) {
  this.closeOverlay()
  }
  this.changeOverlayStyle()
 })
 },
 showOverlay (color, opacity) {
 let overlay = this.overlay = new Overlay({
  el: document.createElement('div')
 })
 const dom = getDOM(overlay.$el)
 dom.style.zIndex = getZIndex()
 overlay.color = color
 overlay.opacity = opacity
 overlay.onClick = this.handlerOverlayClick.bind(this)
 overlay.$appendTo(document.body)

 // 禁止页面滚动
 this.bodyOverflow = document.body.style.overflow
 document.body.style.overflow = 'hidden'
 },
 closeOverlay () {
 if (!this.overlay) return
 document.body.style.overflow = this.bodyOverflow
 let overlay = this.overlay
 this.overlay = null
 overlay.$remove(() => {
  overlay.$destroy()
 })
 },
 changeOverlayStyle () {
 if (!this.overlay || this.instances.length === 0) return
 const instance = this.instances[this.instances.length - 1]
 this.overlay.color = instance.overlayColor
 this.overlay.opacity = instance.overlayOpacity
 },
 // 遮盖层点击处理,会自动调用 弹出层的 overlayClick 方法
 handlerOverlayClick () {
 if (this.instances.length === 0) return
 const instance = this.instances[this.instances.length - 1]
 if (instance.overlayClick) {
  instance.overlayClick()
 }
 }
}

window.addEventListener('keydown', function (event) {
 if (event.keyCode === 27) { // ESC
 if (PopupManager.instances.length > 0) {
  const topInstance = PopupManager.instances[PopupManager.instances.length - 1]
  if (!topInstance) return
  if (topInstance.escPress) {
  topInstance.escPress()
  }
 }
 }
})

export default PopupManager

最后再封装成一个 mixin

import PopupManager from './popup-manager'

export default {
 props: {
 show: {
  type: Boolean,
  default: false
 },
 // 是否显示遮盖层
 overlay: {
  type: Boolean,
  default: true
 },
 overlayOpacity: {
  type: Number,
  default: 0.4
 },
 overlayColor: {
  type: String,
  default: '#000'
 }
 },
 // 组件被挂载时会判断show的值开控制打开
 attached () {
 if (this.show && this.overlay) {
  PopupManager.open(this)
 }
 },
 // 组件被移除时关闭
 detached () {
 PopupManager.close(this)
 },
 watch: {
 show (val) {
  // 修改 show 值是调用对于的打开关闭方法
  if (val && this.overlay) {
  PopupManager.open(this)
  } else {
  PopupManager.close(this)
  }
 }
 },
 beforeDestroy () {
 PopupManager.close(this)
 }
}

使用

以上所有的代码就完成了所有弹出层的共有逻辑, 使用时只需要当做一个mixin来加载即可

<template>
 <div class="dialog"
 v-show="show"
 transition="dialog-fade">
 <div class="dialog-content">
  <slot></slot>
 </div>
 </div>
</template>

<style>
 .dialog {
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 position: fixed;
 width: 90%;
 }

 .dialog-content {
 background: #fff;
 border-radius: 8px;
 padding: 20px;
 text-align: center;
 }

 .dialog-fade-transition {
 transition: opacity .3s linear;
 }

 .dialog-fade-enter,
 .dialog-fade-leave {
 opacity: 0;
 }
</style>

<script>
import Popup from '../src'

export default {
 mixins: [Popup],
 methods: {
 // 响应 overlay事件
 overlayClick () {
  this.show = false
 },
 // 响应 esc 按键事件
 escPress () {
  this.show = false
 }
 }
}
</script>

总结

以上就是关于vue.js弹窗组件的一些知识点,希望对大家的学习或者工作带来一定的帮助,如果大家有疑问可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript学习网址备忘
May 29 Javascript
Javascript面向对象编程
Mar 18 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
vuex实现简易计数器
Oct 27 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
纯JS实现五子棋游戏
May 28 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 #Javascript
Javascript实现前端简单的路由实例
Sep 11 #Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 #Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 #Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 #Javascript
简单分析javascript中的函数
Sep 10 #Javascript
javascript数组常用方法汇总
Sep 10 #Javascript
You might like
20个PHP常用类库小结
2011/09/11 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
javascript操作表格排序实例分析
2015/05/06 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
python妙用之编码的转换详解
2017/04/21 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python 列表的清空方式
2020/01/13 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python异常处理机制结构实例解析
2020/07/23 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
职专应届生求职信
2013/11/16 职场文书
小学教师听课制度
2014/02/01 职场文书
销售员岗位职责
2014/06/09 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
Python OpenCV快速入门教程
2021/04/17 Python
Python中for后接else的语法使用
2021/05/18 Python
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android