项目3种弹框模式

2i18ns 发布于2019-08-20 15:28 / 2794人阅读

摘要：一需求二使用插件在里面使用完整例子不需要的选项就不要设置，详情看文档标题文本类型弹框显示时间点击确认按钮执行的操作点击取消按钮执行的操作解决在中使用时的报错三注意事项我在使用过程报错的几个地方解决添加这样代码选项报错原因版本修改跟

一、需求

二、使用插件 Sweetalert

在vue里面使用 vue-sweetalert

npm install vue-sweetalert --save
import VueSweetAlert from "vue-sweetalert"
Vue.use(VueSweetAlert)

完整例子：（不需要的选项就不要设置，详情看文档）

this.$swal({
    title: "", // 标题
    text: "You will not be able to recover this imaginary file!", // 文本
    type: "warning", // 类型
    timer: 2000, // 弹框显示时间
    showCancelButton: true, 
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!"
  }).then(() => { // 点击确认按钮执行的操作
    this.$swal("Deleted!", "Your imaginary file has been deleted.", "success")
  }, () => { // 点击取消按钮执行的操作
    this.$swal("Cancle!", "Your imaginary file has been cancled.", "success")
  }).catch(this.$swal.noop) // 解决在vue中使用时的报错

三、注意事项

我在使用过程报错的几个地方

1.Uncaught (in promise) timer

解决：添加这样代码catch(this.$swal.noop)

this.$swal({...}).catch(this.$swal.noop)

2.选项报错 Unknown parameter "closeOnConfirm"

原因：版本修改 Migration from SweetAlert to SweetAlert2 跟前面的文档个别选项设置有冲突，本项目看这个

四、代码复制

第1、2种

this.$swal({
        title: "Title",
        text: "You will not be able to recover this imaginary file!",
      }).catch(this.$swal.noop)

第3种

this.$swal({
    title: "", // 标题
    text: "You will not be able to recover this imaginary file!", // 文本
    type: "warning", // 类型
    timer: 2000, // 弹框显示时间
    showCancelButton: true, 
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!"
  }).then(() => { // 点击确认按钮执行的操作
    this.$swal("Deleted!", "Your imaginary file has been deleted.", "success")
  }, () => { // 点击取消按钮执行的操作
    this.$swal("Cancle!", "Your imaginary file has been cancled.", "success")
  }).catch(this.$swal.noop) // 解决在vue中使用时的报错

私有云云服务器种弹框 js3种弹框下弹框弹框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82268.html

项目3种弹框模式

摘要：一需求二使用插件在里面使用完整例子不需要的选项就不要设置，详情看文档标题文本类型弹框显示时间点击确认按钮执行的操作点击取消按钮执行的操作解决在中使用时的报错三注意事项我在使用过程报错的几个地方解决添加这样代码选项报错原因版本修改跟一、需求 showImg(https://segmentfault.com/img/bVLsET?w=2702&h=1834); 二、使用插件 Sweeta...

aaron 2019-08-29 12:20 评论0 收藏0
移动弹窗基础知识浅析——IOS弹窗体系

摘要：尤其是遇到二次确认等场景因此，打算从头整理移动弹窗的基础知识，以弹窗体系为切入点，从定义出发，对移动弹窗进行分类，然后分别分析每一类弹窗的应用场景，以及在使用过程中需要注意的点。摘要：最为常见的【弹窗】反而是最捉摸不定的东西。各种类型的弹窗傻傻分不清楚，不知道在什么场景下应该用哪种弹窗。尤其是遇到二次确认等场景…… 因此，打算从头整理移动弹窗的基础知识，以iOS弹窗体系为切入点，从...

jas0n 2019-06-28 10:58 评论0 收藏0
在微信小程序中创建属于自己的个性弹框

摘要：于是我自己写一个我的页面专用的弹框，具体效果如下图以下是代码贴图最外层的样式主要是写后面的遮罩层，就是具体的弹框区域弹框的显示隐藏用控制然后就可以在弹框中写自己想要展示的效果啦忽略部分未调整样式微信小程序提供的弹框模版就3种：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);对应的效果是这样的 show...

luck 2019-08-30 15:55 评论0 收藏0
在微信小程序中创建属于自己的个性弹框

摘要：于是我自己写一个我的页面专用的弹框，具体效果如下图以下是代码贴图最外层的样式主要是写后面的遮罩层，就是具体的弹框区域弹框的显示隐藏用控制然后就可以在弹框中写自己想要展示的效果啦忽略部分未调整样式微信小程序提供的弹框模版就3种：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);对应的效果是这样的 show...

yy13818512006 2019-08-23 15:12 评论0 收藏0