当前位置：首页 > VUE

vue实现点击弹窗

2026-03-29 17:02:21VUE

使用 Vue 实现点击弹窗

在 Vue 中实现点击弹窗功能可以通过组件化方式完成。以下是两种常见实现方法：自定义组件和使用第三方库（如 Element UI）。

自定义弹窗组件

创建弹窗组件
新建一个 Modal.vue 文件，定义弹窗结构和样式：

<template>
  <div v-if="show" class="modal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean
  },
  methods: {
    closeModal() {
      this.$emit('close');
    }
  }
};
</script>

<style>
.modal {
  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;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  position: relative;
}
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
</style>

在父组件中使用
在需要触发弹窗的父组件中引入 Modal 并控制显示状态：

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

<script>
import Modal from './Modal.vue';
export default {
  components: { Modal },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

使用 Element UI 弹窗

安装 Element UI
通过 npm 安装 Element UI：
```
npm install element-ui
```

全局引入或按需引入
在 main.js 中全局引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

使用 Dialog 组件
在组件中直接调用 Element UI 的 Dialog：

vue实现点击弹窗

<template>
  <div>
    <el-button @click="dialogVisible = true">打开弹窗</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>这里是弹窗内容</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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