vue右击弹框跟随鼠标位置_一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

介绍

sweetalert2是一个漂亮的、响应式、可定制的替代JAVASCRIPT原生的弹出框插件。sweetalert2相比sweetalert更加强大,但它不是sweetalert的扩展，它是一个全新的插件，且支持三大流行前端框架React、Vue、Angular。

Github和官网

https://github.com/sweetalert2/sweetalert2

https://sweetalert2.github.io/

安装

提供了很多安装方式

• 使用npm安装

npm install --save sweetalert2

• 使用cdn

注意：如果想要兼容IE11，还得引入polyfill.js

模块化用法

// ES6 Modules or TypeScriptimport Swal from 'sweetalert2'// CommonJSconst Swal = require('sweetalert2')

示例

• 最基本的信息弹出框

Swal.fire('基本信息弹框')

• 标题下包含文字

Swal.fire( '标题下有文字', '标题下的文字?', 'question' )

• 底部文字

Swal.fire({ type: 'error', title: '标题', text: '出错啦！', footer: '为什么会出错?' })

• 自定义html

Swal.fire({ title: 'HTML 示例', type: 'info', html: '你可以使用自定义的html百度一下', showCloseButton: true, showCancelButton: true, focusConfirm: false, confirmButtonText: '好的', confirmButtonAriaLabel: '看起来不错', cancelButtonText: '取消', cancelButtonAriaLabel: '取消', })

• 自定义弹框的位置

Swal.fire({ position: 'top-end', type: 'success', title: '你的修改以保存', showConfirmButton: false, timer: 1500 })

• 函数回调

Swal.fire({ title: '确定要删除么?', text: "删除后将无法撤销!