基于vue开发的popup 的mixins 用于管理弹出框的

基于vue开发的popup 的mixins 用于管理弹出框的遮盖层

npm install vue-popup-mixin --save 使用

<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 'vue-popup-mixin/dist/VuePopupMixin.css'; import Popup from 'vue-popup-mixin' export default { mixins: [Popup], methods: { // 响应 overlay事件 overlayClick () { this.show = false }, // 响应 esc 按键事件 escPress () { this.show = false } } } </script>

默认使用 show 控制弹出层是否显示， 这里我使用了 v-show 也可以使用 v-if , 当遮盖层点击之后会调用实例中的 overlayClick 方法，如果不实现这个方法，则不做响应， escPress 方法是当敲下 esc 键响应事件

MIT

Copyright (c) 2016 myron