当前位置：首页 > VUE

js实现vue弹窗

2026-02-18 23:38:08VUE

使用 Vue.js 实现弹窗组件

基础弹窗组件实现

创建一个基础的 Vue 弹窗组件，包含打开、关闭功能。

<template>
  <div v-if="isVisible" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <button class="close-button" @click="closeModal">×</button>
      <slot></slot>
    </div>
  </div>
</template>

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

<style scoped>
.modal-overlay {
  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;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  max-width: 80%;
  max-height: 80%;
  overflow-y: auto;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
</style>

在父组件中使用弹窗

在父组件中控制弹窗的显示与隐藏。

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

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

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

动态传递内容

通过插槽（slot）或 props 动态传递弹窗内容。

<template>
  <Modal :isVisible="showModal" @close="showModal = false">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </Modal>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      title: '动态标题',
      content: '动态内容'
    };
  }
};
</script>

添加动画效果

使用 Vue 的过渡（transition）组件为弹窗添加动画效果。

<template>
  <transition name="fade">
    <div v-if="isVisible" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

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

全局弹窗管理

通过 Vue 的插件机制或事件总线实现全局弹窗控制。

// main.js
import Vue from 'vue';
import Modal from './components/Modal.vue';

Vue.prototype.$modal = {
  show(component, props = {}) {
    const ModalComponent = Vue.extend(Modal);
    const instance = new ModalComponent({
      propsData: { ...props }
    });
    instance.$mount();
    document.body.appendChild(instance.$el);
    return instance;
  }
};

使用第三方库

常见的 Vue 弹窗库如 vue-js-modal 或 element-ui 提供更丰富的功能。

js实现vue弹窗

npm install vue-js-modal

import VModal from 'vue-js-modal';
Vue.use(VModal);

<template>
  <button @click="showModal = true">打开弹窗</button>
  <modal name="example-modal">
    <h3>第三方弹窗</h3>
    <p>使用 vue-js-modal 实现。</p>
  </modal>
</template>

<script>
export default {
  methods: {
    showModal() {
      this.$modal.show('example-modal');
    }
  }
};
</script>