vue自定义全局弹窗组件

vue自定义全局弹窗组件

组件目录如下

dialogBox文件代码如下：

<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 实例到  或者  上。

  // 挂载到元素上;$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)