vue实现简单的弹窗

使用 Vue 实现简单弹窗

组件实现

创建一个名为 Modal.vue 的组件文件，包含弹窗的基础结构和逻辑：

<template>
  <div class="modal-overlay" v-if="isOpen" @click.self="close">
    <div class="modal-content">
      <slot></slot>
      <button @click="close">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isOpen: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  max-width: 500px;
  width: 80%;
}
</style>

父组件调用

在需要使用弹窗的父组件中引入并使用：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <Modal :isOpen="showModal" @close="showModal = false">
      <h3>弹窗标题</h3>
      <p>这是弹窗内容</p>
    </Modal>
  </div>
</template>

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

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

进阶功能

为弹窗添加动画效果，可以修改 Modal.vue：

<template>
  <transition name="fade">
    <div class="modal-overlay" v-if="isOpen" @click.self="close">
      <transition name="slide">
        <div class="modal-content">
          <slot></slot>
          <button @click="close">关闭</button>
        </div>
      </transition>
    </div>
  </transition>
</template>

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

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter, .slide-leave-to {
  transform: translateY(-50px);
}
</style>

全局弹窗服务

创建一个全局弹窗服务，便于在任何组件中调用：

// modalService.js
import Vue from 'vue'

const ModalBus = new Vue()

export default {
  show(content, options = {}) {
    ModalBus.$emit('show', { content, ...options })
  },
  hide() {
    ModalBus.$emit('hide')
  },
  onShow(callback) {
    ModalBus.$on('show', callback)
  },
  onHide(callback) {
    ModalBus.$on('hide', callback)
  }
}

然后在根组件中注册全局弹窗容器：

<template>
  <div id="app">
    <GlobalModal />
    <router-view/>
  </div>
</template>

<script>
import GlobalModal from './components/GlobalModal.vue'

export default {
  components: { GlobalModal }
}
</script>

实现 GlobalModal.vue 组件：

<template>
  <Modal :isOpen="isOpen" @close="hide">
    <div v-html="content"></div>
  </Modal>
</template>

<script>
import Modal from './Modal.vue'
import modalService from '../services/modalService'

export default {
  components: { Modal },
  data() {
    return {
      isOpen: false,
      content: ''
    }
  },
  created() {
    modalService.onShow(({ content }) => {
      this.content = content
      this.isOpen = true
    })
    modalService.onHide(() => {
      this.isOpen = false
    })
  },
  methods: {
    hide() {
      modalService.hide()
    }
  }
}
</script>

这样可以在任何组件中通过 modalService.show() 和 modalService.hide() 来控制弹窗的显示和隐藏。