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

以上所有的代码就完成了所有弹出层的共有逻辑， 使用时只需要当做一个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弹窗组件的一些知识点，希望对大家的学习或者工作带来一定的帮助，如果大家有疑问可以留言交流，谢谢大家对软件开发网的支持。