vue实现popup

Vue 实现 Popup 弹窗

使用组件化方式创建弹窗

创建一个独立的 Vue 组件作为弹窗的基础结构，例如 Popup.vue。组件模板包含弹窗的 HTML 结构和样式，通过 v-if 或 v-show 控制显示隐藏。

<template>
  <div class="popup-mask" v-show="visible" @click.self="close">
    <div class="popup-content">
      <slot></slot>
      <button @click="close">关闭</button>
    </div>
  </div>
</template>

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

<style>
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

在父组件中使用弹窗

通过 v-model 绑定弹窗的显示状态，可以方便地控制弹窗的打开和关闭。

<template>
  <div>
    <button @click="showPopup = true">打开弹窗</button>
    <Popup v-model="showPopup">
      <h3>弹窗内容</h3>
      <p>这里是弹窗的具体内容</p>
    </Popup>
  </div>
</template>

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

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

使用 Vue 插件方式实现全局弹窗

创建一个弹窗插件，可以通过 this.$popup 在任何组件中调用弹窗。

// popupPlugin.js
const PopupPlugin = {
  install(Vue) {
    const PopupConstructor = Vue.extend(require('./Popup.vue').default)
    let popupInstance

    Vue.prototype.$popup = {
      show(content) {
        if (!popupInstance) {
          popupInstance = new PopupConstructor({
            el: document.createElement('div')
          })
          document.body.appendChild(popupInstance.$el)
        }

        popupInstance.visible = true
        popupInstance.$slots.default = [content]
      },
      hide() {
        if (popupInstance) {
          popupInstance.visible = false
        }
      }
    }
  }
}

// main.js
import Vue from 'vue'
import PopupPlugin from './popupPlugin'
Vue.use(PopupPlugin)

使用第三方 UI 库实现弹窗

许多 Vue UI 库如 Element UI、Vuetify 等都提供了现成的弹窗组件。

<template>
  <div>
    <el-button @click="dialogVisible = true">打开弹窗</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <span>这是一段弹窗内容</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

动画效果增强

为弹窗添加过渡动画，提升用户体验。

<template>
  <transition name="fade">
    <div class="popup-mask" v-show="visible" @click.self="close">
      <transition name="slide">
        <div class="popup-content">
          <slot></slot>
          <button @click="close">关闭</button>
        </div>
      </transition>
    </div>
  </transition>
</template>

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

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