把组件库的alert挂载到vue的$下面

各类弹出框使用说明

包含 toast,alert(短提示，长提示+富文本编辑-弹出/长提示+富文本编辑-抽屉),confirm

alert 和 confirm

1.引用

main.js 中引入

/*注意此处引入的是index文件*/
import AlertDialog from "@/components/Alert/index";
Vue.use(AlertDialog);

2.使用

调用方式：
a(只输入显示的提示信息):
Eg:

this.$alert("提示信息");

b(传入对象-包含提示信息和点击确认的回调函数):
Eg:

this.$alert({
  msg: "提示信息",
  yesFunction: this.dockYes /*此处为点击确认的回调函数*/,
  /*其他参数...*/
});

组件支持以下自定义参数：
header -显示标题
msg -显示文本内容
alertWidth -alert 弹窗宽度(string-'260'/'260px')
target -弹窗指定的目标容器（默认 body）
yesFunction -点击确认的回调函数，该函数在 alert 关闭后执行
position - 弹窗显示位置（默认 center,100）

组件构建方式：

1.使用 vue.extend 创建组件构造器，调用的时候 new 一个出来，通过 new 出来的新组件接参数，把对象挂到$alert 下。
2.alert 中的内容，需求：图标+内容。原本 ejs 的弹窗无图标。content 只能支持整个组件传入（组件无法接收 props），或自定义 html 片段，或只显示 msg 文字。最终采用自定义 html 片段方式，在弹窗 mounted 中，手动指定 innerHTML。

toast

使用

//4种状态success information warning error
/*
 *参数说明：参1：显示的内容文字，
 *参2：title，可不传，不传的话，默认是打开页签的标题 document.title
 *参3:显示的位置默认为 { X: 'center', Y: 'top'} 中上显示，可传值 { X: 'calc(50% - 150px)', Y: '50%'} 最中心区域显示，也可传其他自定义位置。
 */
this.$toast.success("提示信息", "top");
this.$toast.information("提示消息", "自定义title");
this.$toast.warning("提示警告", "自定义title", { X: "left", Y: "top" });

/王梦涵 2021-05-13/