尋夢新聞LINE@每日推播熱門推薦文章，趣聞不漏接❤️
介紹
sweetalert2是一個漂亮的、響應式、可定制的替代JAVASCRIPT原生的彈出框插件。sweetalert2相比sweetalert更加強大,但它不是sweetalert的擴展，它是一個全新的插件，且支持三大流行前端框架React、Vue、Angular。
Github和官網
https://github.com/sweetalert2/sweetalert2
https://sweetalert2.github.io/
安裝
提供了很多安裝方式
- 使用npm安裝
npm install --save sweetalert2
- 使用cdn
<script src="httpss://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
注意：如果想要兼容IE11，還得引入polyfill.js
<script src="httpss://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>
模塊化用法
// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')
示例
- 最基本的信息彈出框
Swal.fire('基本信息彈框')
- 標題下包含文字
Swal.fire(
'標題下有文字',
'標題下的文字?',
'question'
)
- 底部文字
Swal.fire({
type: 'error',
title: '標題',
text: '出錯啦！',
footer: '<a href>為什麼會出錯?</a>'
})
- 自定義html
Swal.fire({
title: '<strong>HTML <u>示例</u></strong>',
type: 'info',
html:
'你可以使用自定義的html<a href="https://wwwbaidu.com">百度一下<a>',
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: "刪除後將無法撤銷!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '確定',
cancelButtonText:'取消'
}).then((result) => {
if (result.value) {
Swal.fire(
'刪除成功!',
'文件已被刪除',
'success'
)
}
})
- 自定義圖片，禁止動畫
Swal.fire({
title: '標題',
text: '自定義圖片',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
- 自定義寬度、邊框和背景
Swal.fire({
title: '自定義寬度、邊框和背景',
width: 600,
padding: '3em',
background: '#fff url(/images/trees.png)',
})
- 自定義關閉（自動關閉）
let timerInterval
Swal.fire({
title: '自動關閉的彈框!',
html: '我會在<strong></strong> 秒後關閉.',
timer: 2000,
onBeforeOpen: () => {
Swal.showLoading()
timerInterval = setInterval(() => {
Swal.getContent().querySelector('strong')
.textContent = Swal.getTimerLeft()
}, 100)
},
onClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
if (
// Read more about handling dismissals
result.dismiss === Swal.DismissReason.timer
) {
console.log('I was closed by the timer')
}
})
- 異步提交
Swal.fire({
title: '提交用戶名',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: '提交',
cancelButtonText: '取消',
showLoaderOnConfirm: true,
preConfirm: (login) => {
return fetch(`//api.github.com/users/${login}`)
.then(response => {
if (!response.ok) {
throw new Error(response.statusText)
}
return response.json()
})
.catch(error => {
Swal.showValidationMessage(
`請求出錯: ${error}`
)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
if (result.value) {
Swal.fire({
title: `${result.value.login}'s avatar`,
imageUrl: result.value.avatar_url
})
}
})
- 三步曲
Swal.mixin({
input: 'text',
confirmButtonText: '下一步',
showCancelButton: true,
cancelButtonText:'取消',
progressSteps: ['1', '2', '3']
}).queue([
{
title: '問題1',
text: '使用modal很簡單？'
},
'問題2',
'問題3'
]).then((result) => {
if (result.value) {
Swal.fire({
title: '所有問題回答完成!',
html:
'你的答案是: <pre><code>' +
JSON.stringify(result.value) +
'</code></pre>',
confirmButtonText: 'Lovely!'
})
}
})
這里就簡單介紹這些示例，更多示例詳見官方文檔
彈框類型
- success
- error
- warning
- info
- question
相關項目
- ngx-sweetalert2 – Angular 4+集成
https://github.com/sweetalert2/ngx-sweetalert2
- sweetalert2-react-content – React集成
https://github.com/sweetalert2/sweetalert2-react-content
- sweetalert2-webpack-demo – webpack demo
https://github.com/sweetalert2/sweetalert2-webpack-demo
- sweetalert2-parcel-demo – parcel demo
https://github.com/sweetalert2/sweetalert2-parcel-demo
- Vue.js集成（社區維護）
https://github.com/avil13/vue-sweetalert2
- Laravel 5 Package（社區維護）
https://github.com/realrashid/sweet-alert
瀏覽器兼容性
總結
sweetalert2是原本sweetalert的升級版，功能更加強大，文檔更加全面，寫法更加先進，是Web開發中常用的插件，當然同樣優秀的還有很多，比如國產的layer.js也很好用，選擇一個適合自己的就成，今天的介紹就到這里，希望能對你有所幫助，如果還有更好的推薦，歡迎到評論區留言，謝謝！
‘,