以下是一个
Vue模态框的
示例代码：
```javascript
// index.
vue
<template>
<div class="
modal" v-if="show">
<div class="
modal-mask" @click="close
Modal"></div>
<div class="
modal-content">
<!--
模态框的内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false, // 控制
模态框的显示与隐藏
};
},
methods: {
close
Modal() {
this.show = false; // 关闭
模态框
},
},
};
</script>
// index.js
import
Vue from "
vue";
import
ModalCops from "./index.
vue";
const Login
Modal =
Vue.extend(
ModalCops); // 创建
Vue 子类
let instance;
const
ModalBox = (options = {}) => {
if (instance) {
instance.close
Modal();
}
instance = new Login
Modal({
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实例上：
```javascript
// main.js
import
Vue from "
vue";
import Login
Modal from "./components/Login
Modal";
Vue.use(Login
Modal);
```
这样，我们就可以在
Vue组件
中使用`$loginer`
方法来打开
模态框，例如：
```javascript
this.$loginer.sigin(); // 打开登录
模态框
this.$loginer.register(); // 打开注册
模态框
```
请注意，以上
代码只是一个
示例，具体的
模态框样式和功能需要根据实际需求进行调整和实现。
2155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
