自写一个类似el-message的消息提示全局组件

首先说明一下这个组件一共三大部分组成
第一部分：组件部分。
第二部分：应用页面部分。
第三部分：main.js引入use ()注册部分

组件部分我分为了三部分
页面部分，dialog.vue
样式部分，dialog.scss
注册js部分，dialog.js
直接看代码：
首先看dialog.vue

<template>
  <div
    v-show="dialog.visiable ? dialog.visiable : false"
    class="dialog_container"
    :style="{
      width: dialog.width ? dialog.width + 'px' : '400px',
      height: dialog.height ? dialog.height + 'px' : '160px',
      background: dialog.background ? dialog.background : 'lightgrey',
    }"
  >
    <div class="title">{{ dialog.title ? dialog.title : "提示框!" }}</div>
    <div class="ensure_cancle">
      <div
        @click="ensure_cancle(item)"
        :key="index"
        v-for="(item, index) in dialog.ensure_cancle"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dialog: {},
  },
  data() {
    return {};
  },
  watch:{
  },
  created() {},
  mounted() {
    this.setPosition(); //设置弹窗垂直位置
  },
  methods: {
    //弹窗垂直位置处理方法
    setPosition() {
      let a = document.getElementsByClassName("dialog_container")[0];
      let offsetWidth=parseInt(a.style.width.substring(0,a.style.width.indexOf('px')))//截取宽度并转换为数字类型
      let offsetHeight=parseInt(a.style.height.substring(0,a.style.height.indexOf('px')))//截取高度并转换为数字类型
    //  a.style.left = document.body.clientWidth / 2 - a.offsetWidth / 2 + "px"; //这里只作水平居中处理，如有特殊需求参考垂直处理方式
     a.style.left = document.body.clientWidth / 2 - offsetWidth / 2 + "px"; //这里只作水平居中处理，如有特殊需求参考垂直处理方式
      if (!this.dialog.top) {
        //默认状态垂直居中
        a.style.top =
        //   document.body.clientHeight / 2 - a.offsetHeight / 2 + "px";
          document.body.clientHeight / 2 - offsetHeight / 2 + "px";
      } else if (this.dialog.top == "top") {
        //top状态靠屏幕顶部
        a.style.top = 0 + "px";
      } else if (this.dialog.top == "center") {
        //center状态垂直居中
        a.style.top =
        //   document.body.clientHeight / 2 - a.offsetHeight / 2 + "px";
          document.body.clientHeight / 2 - offsetHeight / 2 + "px";
      } else if (this.dialog.top == "bottom") {
        //bottom状态靠屏幕底部
        // a.style.top = document.body.clientHeight - a.offsetHeight + "px";
        a.style.top = document.body.clientHeight - offsetHeight + "px";
      } else {
        //自由数字状态，
        a.style.top = this.dialog.top + "px";
      }
    },
    //确定按钮
    ensure() {
      this.$emit("ensure");//触发父组件方法
    },
    //取消按钮
    cancle() {
      this.$emit("cancle");//触发父组件方法
    },
    //判断方法
    ensure_cancle(val) {
      if (val == "取消") {
        this.cancle();
      } else if (val == "确定") {
        this.ensure();
      }
    },
  },
};
</script>
<style scoped lang='scss'>
@import "./dialog.scss";
</style>

dialog.scss部分

.dialog_container{
    position: fixed;
    z-index: 9999999;
    box-shadow: 0 0 10px lightgrey;
    border-radius: 8px;
    min-width: 300px;//设置最小宽度
    min-height: 150px;
    .title{
    font-size: 16px;
    color: black;
    width: 100%;
    height: 30px;
    text-indent: 9px;
    line-height: 30px;
    border-bottom:1px solid lightslategrey ;
    background: lightslategrey;
    border-radius: 8px 8px 0 0;


    }
    .ensure_cancle{
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 200px;
        height: 35px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        div{
            width: 40%;
            height: 100%;
            border-radius: 6px;
            letter-spacing: 4px;
            color: black;
            line-height: 35px;
            text-align: center;
            cursor: pointer;
            font-size: 16px;
            &:hover{
                opacity: 0.7;
            }
        }
        div:first-child{
            background: grey;
        }
        div:last-child{
            background: cornflowerblue;
        }
    }
}

dialog.js部分

import mydialog from './dialog.vue'
const dialog ={
    install:function(Vue,options){
        Vue.component('my_dialog',mydialog)
    }
}
export default dialog

应用·页面部分

<template>
  <div>
    <div @click="dialog.visiable = true" class="ceshi">打开提示框</div>
    <my_dialog :dialog="dialog" @ensure="ensure" @cancle="cancle"></my_dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialog: {
        background: "", //背景色，支持一切颜色色值
        top: 'center', //top,center,bottom,以及正数数字,或者默认''null等、
        width: 400, //宽度，支持输入数字，>=0,已设置最小宽度300
        height: 160, //高度，支持输入数字，>=0，已设置最小高度150
        visiable: false, //控制弹窗是否显示，布尔值
        ensure_cancle: ["取消", "确定"], //注意此处文字若修改，组件内判断方法可能需要你同步修改
        title: "确认删除吗？", //自定义左上角弹窗名称
      },
    };
  },
  methods: {
    ensure() {
      alert("删除成功");
      this.dialog.visiable = false;
    },
    cancle() {
      alert("取消删除");
      this.dialog.visiable = false;
    },
  },
};
</script>
<style scoped lang='scss'>
.ceshi {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  line-height: 100px;
  background: red;
  font-size: 20px;
  text-align: center;
  color: yellow;
  cursor: pointer;
}
</style>

main.js引入这里不放代码了
说明：这是一个类似于el-message的全局弹窗插件。
页面内有注释,这个插件是基于vue写的，需要巩固学习vue的小伙伴可以参考哦，（注释很详细）
此插件优点:1.可以自定义宽高，
2.可以自定义主题背景
3.可以自定义提示标题。
4.可以自定义垂直方向的位置。
5.传入参数即使不传，都设置了默认值。
使用时需要将插件内的的dialog.js引入到main.js中，然后Vue.use(xx)，在你的应用页面就可以参考使用了。
注意：（目前的样式中设置了最小宽高，左上角标题文字随意修改，取消和确定按钮位置顺序可以任意换，但如果要在应用页面修改按钮文字，在插件内判断方法也要同步修改）

空暇写着玩的东西，不喜勿喷哈。