vue手动实现弹窗

Vue 手动实现弹窗组件

创建弹窗组件

在 components 目录下新建 Modal.vue 文件，定义弹窗结构和样式：

<template>
  <div class="modal" v-if="isVisible">
    <div class="modal-content">
      <span class="close" @click="close">×</span>
      <slot></slot>
    </div>
  </div>
</template>

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

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

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 50%;
  position: relative;
}

.close {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 24px;
  cursor: pointer;
}
</style>

在父组件中使用弹窗

在需要弹窗的父组件中引入并控制弹窗显示：

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

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

export default {
  components: {
    Modal
  },
  data() {
    return {
      modalVisible: false
    };
  },
  methods: {
    showModal() {
      this.modalVisible = true;
    },
    hideModal() {
      this.modalVisible = false;
    }
  }
};
</script>

扩展功能：动态内容传递

通过插槽和 props 实现更灵活的弹窗内容控制：

<!-- Modal.vue -->
<template>
  <div class="modal" v-if="isVisible">
    <div class="modal-content">
      <span class="close" @click="close">×</span>
      <h3>{{ title }}</h3>
      <slot name="content"></slot>
      <div class="footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

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

使用动态弹窗

在父组件中传递不同内容：

<template>
  <Modal 
    :isVisible="modalVisible" 
    :title="modalTitle"
    @close="hideModal"
  >
    <template v-slot:content>
      <p>自定义内容区域</p>
    </template>
    <template v-slot:footer>
      <button @click="submit">提交</button>
      <button @click="hideModal">取消</button>
    </template>
  </Modal>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false,
      modalTitle: '自定义标题'
    };
  }
};
</script>

全局弹窗服务

创建全局弹窗服务实现任意位置调用：

// services/modal.js
import Vue from 'vue';
import ModalComponent from '@/components/Modal.vue';

const ModalConstructor = Vue.extend(ModalComponent);

const Modal = (options) => {
  const instance = new ModalConstructor({
    propsData: options.props
  }).$mount();

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

  return {
    show: () => {
      instance.isVisible = true;
    },
    hide: () => {
      instance.isVisible = false;
    }
  };
};

export default Modal;

全局调用示例

在任意组件中使用全局弹窗：

import Modal from '@/services/modal';

const modal = Modal({
  props: {
    title: '全局弹窗'
  }
});

modal.show();

// 关闭弹窗
modal.hide();