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 v-show="show" transition="dialog-fade"> <div> <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弹窗组件的一些知识点，希望对大家的学习或者工作带来一定的帮助，如果大家有疑问可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: