vue 模态框示例代码

以下是一个Vue模态框的示例代码：

// index.vue
<template>
  <div class="modal" v-if="show">
    <div class="modal-mask" @click="closeModal"></div>
    <div class="modal-content">
      <!-- 模态框的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false, // 控制模态框的显示与隐藏
    };
  },
  methods: {
    closeModal() {
      this.show = false; // 关闭模态框
    },
  },
};
</script>

// index.js
import Vue from "vue";
import ModalCops from "./index.vue";

const LoginModal = Vue.extend(ModalCops); // 创建 Vue 子类
let instance;

const ModalBox = (options = {}) => {
  if (instance) {
    instance.closeModal();
  }

  instance = new LoginModal({
    data: {
      show: true, // 实例化后显示
      ...options,
    },
  });

  instance.$mount();
  document.body.appendChild(instance.$el); // 将模态框添加至 body

  return instance;
};

ModalBox.sigin = () => {
  return ModalBox({ type: "sigin" });
};

ModalBox.register = () => {
  return ModalBox({ type: "register" });
};

export default {
  install(Vue) {
    Vue.prototype.$loginer = ModalBox;
  },
};

在入口文件（main.js）中，我们可以将模态框组件挂载到Vue实例上：

// main.js
import Vue from "vue";
import LoginModal from "./components/LoginModal";

Vue.use(LoginModal);

这样，我们就可以在Vue组件中使用`$loginer`方法来打开模态框，例如：

this.$loginer.sigin(); // 打开登录模态框
this.$loginer.register(); // 打开注册模态框

请注意，以上代码只是一个示例，具体的模态框样式和功能需要根据实际需求进行调整和实现。