vue-message-simulate

最新推荐文章于 2023-03-17 11:13:46 发布

jack_lua

最新推荐文章于 2023-03-17 11:13:46 发布

阅读量404

点赞数

分类专栏： js vue 文章标签： vue alert confirm

本文链接：https://blog.csdn.net/jack_lua/article/details/85159190

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

vue-message-simulate

a light plugin of vue， it simulates alert, confrim,model
依赖于sass 切，不支持ie9 一下的版本,使用如下:
下载之后，在main.js中

1，import vue $m e s s a g e f r o m^{'} v u e - m e s s a g e - s i m u l a t e^{'}; < b r > 2 ， V u e . u s e (v u e$ message);

在页面中直接使用：

this.$message({
  messageBox: {
    flag: true,
    desc: '请耐心等待',
    type: 'confirm',
    contentStyleObject: {
        color: 'red',
        fontSize: '16px',
        width: '200px',
        height: '200px',
      },
    },
    prohibitBgClick: true,
  });

参数如下：

flag 是否执行动画
duration 动画执行时间
closed 关闭动画的标识
onClose 动画结束时的回调函数
type 弹出框类型;默认alert, confirm, model
prohibitBgClick 弹出框类型为, confirm, model时，点击背景色是否关闭弹框

 {
   messageBox: {
     flag: false,
     desc: '',
     type: 'alert',
     header: 'title',
     showFooterbtns: true,
     showFooterConfirm: true,
     showFooterCancel: true,
     boxStyleObject: null,
     footerStyleObject: null,
     contentStyleObject: null,
   },
   duration: 2000,
   onClose: null,
   onConfirm: null,
   onCancel: null,
   prohibitBgClick: false,
 }