vue自定义全局弹窗组件
组件目录如下
dialogBox文件代码如下:
<!-- 弹窗dialog.vue文件 -->
<template>
<div class="dialog_box" v-if="show">
<div class="dialog_wrap">
<img
v-if="type === 'success'"
src="@/assets/success_icon.png"
alt=""
class="icon"
/>
<img
v-if="type === 'error'"
src="@/assets/fail_icon.png"
alt=""
class="icon"
/>
<div class="text">{{ message }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean,
message: {
type: String,
default: "发布成功",
},
type: {
type: String,
default: "success",
},
},
data() {
return {};
},
watch: {
show() {
if (this.show) {
// 禁止滚动
document
.querySelector("body")
.setAttribute("style", "height: 100vh;overflow:hidden;");
return;
}
document
.querySelector("body")
.setAttribute("style", "height: auto;overflow:auto;");
},
},
methods: {},
};
</script>
<style lang="scss" scoped>
.dialog_box {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 1001;
top: 0;
left: 0;
.dialog_wrap {
display: flex;
align-items: center;
justify-content: center;
height: 98px;
width: 480px;
background: #fff;
box-shadow: 1px 0 10px 0 gray;
border-radius: 2px;
margin: 0 auto;
top: 30vh;
position: absolute;
left: 0;
right: 0;
padding: 0 40px;
font-weight: 500;
font-size: 20px;
line-height: 28px;
color: #333333;
img {
width: 28px;
height: 28px;
margin-right: 10px;
flex-shrink: 0;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
index.js文件代码如下:
import DialogCom from "./dialogbox.vue";
const Dialog = {}; // 定义插件对象
// Vue的install方法,用于定义vue插件
Dialog.install = function(Vue) {
// 使用Vue构造器,创建“子类”
const DialogConstructor = Vue.extend(DialogCom);
// 实例化
const instance = new DialogConstructor();
// el官方注解:
// 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
// 在实例挂载之后,元素可以用 vm.$el 访问。
// 如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译
// 提供的元素只能作为挂载点。所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。
// 挂载到元素上;$el访问元素并插入到body中
instance.$mount(document.createElement("div"));
document.body.appendChild(instance.$el);
// Vue原型上添加显示方法,以便全局调用
Vue.prototype.$$showDialog = (options = {}) => {
if (this.dialogTimer) clearTimeout(this.dialogTimer);
// 通过传入的props改变组件中的属性来显示不同提示效果以及显示时间
instance.message = options.message || "";
instance.show = options.show !== false;
instance.type = options.type || "loading";
this.dialogTimer = setTimeout(() => {
instance.show = false;
}, options.duration || 2000);
};
// Vue原型添加隐藏方法
Vue.prototype.$$hideDialog = function() {
instance.show = false;
};
};
export default Dialog;
然后再main.js中引入使用即可,代码如下:
// 自定义提示框
// this.$$showDialog() // 默认加载
// this.$$showDialog({message: '内容', type: 'success'})
// this.$$showDialog({message: '内容', type: 'success', duration: 5000})
// this.$$hideDialog() // 隐藏弹窗
import Dialog from "./components/DialogBox/index"
Vue.use(Dialog)