vue弹窗组件的实现

Vue 弹窗组件的实现

基础弹窗组件结构

创建一个名为Modal.vue的文件，包含以下基础结构：

<template>
  <div class="modal-mask" v-show="visible" @click.self="close">
    <div class="modal-container">
      <div class="modal-header">
        <slot name="header"></slot>
        <button @click="close">×</button>
      </div>
      <div class="modal-body">
        <slot></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-container {
  background: white;
  border-radius: 4px;
  min-width: 300px;
  max-width: 80%;
}

.modal-header {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 10px;
  border-top: 1px solid #eee;
  text-align: right;
}
</style>

使用弹窗组件

在父组件中注册并使用弹窗：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <Modal v-model:visible="showModal">
      <template #header>
        <h3>标题</h3>
      </template>

      <p>这是弹窗内容</p>

      <template #footer>
        <button @click="showModal = false">关闭</button>
      </template>
    </Modal>
  </div>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: { Modal },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

进阶功能实现

动画效果 添加过渡动画增强用户体验：

<template>
  <transition name="modal">
    <div class="modal-mask" v-show="visible" @click.self="close">
      <!-- 内容不变 -->
    </div>
  </transition>
</template>

<style scoped>
.modal-enter-active, .modal-leave-active {
  transition: opacity 0.3s;
}
.modal-enter, .modal-leave-to {
  opacity: 0;
}

.modal-enter-active .modal-container,
.modal-leave-active .modal-container {
  transition: transform 0.3s;
}
.modal-enter .modal-container,
.modal-leave-to .modal-container {
  transform: scale(0.9);
}
</style>

全局弹窗服务 创建可编程调用的弹窗：

1. 创建modalService.js:

import Vue from 'vue';
import Modal from './Modal.vue';

const ModalConstructor = Vue.extend(Modal);

const modalService = {
  open(options) {
    const instance = new ModalConstructor({
      propsData: options.props
    });

    if(options.slots) {
      Object.keys(options.slots).forEach(name => {
        instance.$slots[name] = options.slots[name];
      });
    }

    instance.$mount();
    document.body.appendChild(instance.$el);

    instance.$on('update:visible', val => {
      if(!val) {
        setTimeout(() => {
          instance.$el.remove();
          instance.$destroy();
        }, 300);
      }
    });

    instance.visible = true;
    return instance;
  }
};

export default modalService;

1. 使用全局弹窗:

import modalService from './modalService';

modalService.open({
  props: {},
  slots: {
    default: '<p>全局弹窗内容</p>',
    header: '<h3>全局标题</h3>',
    footer: '<button>确定</button>'
  }
});

可复用性增强

配置化弹窗 通过props传递更多配置选项：

props: {
  title: String,
  width: {
    type: String,
    default: '50%'
  },
  showClose: {
    type: Boolean,
    default: true
  },
  closeOnClickMask: {
    type: Boolean,
    default: true
  }
}

事件处理 添加更多事件支持：

methods: {
  handleConfirm() {
    this.$emit('confirm');
    this.close();
  },
  handleCancel() {
    this.$emit('cancel');
    this.close();
  }
}

这些实现方式涵盖了Vue弹窗组件的基础到高级用法，可以根据项目需求选择合适的实现方案。