安基網 首頁 腳本 JavaScript 查看內容

一個零依賴的漂亮的JavaScript彈框插件——sweetalert2

2019-6-10 10:18| 投稿: xiaotiger |來自: 互聯網


免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!

摘要: 介紹sweetalert2是一個漂亮的、響應式、可定制的替代JAVASCRIPT原生的彈出框插件。sweetalert2相比sweetalert更加強大,但它不是sweetalert的擴展,它是一個全新的插件,且支持三大流行前端框架React、Vue、Angular。Github和官網https://github.com/sweetalert2/sweetalert2https://sweetalert2.github ...

介紹

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 TypeScript
import Swal from 'sweetalert2'
// CommonJS
const 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: "刪除后將無法撤銷!",
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: '我會在 秒后關閉.',
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:
'你的答案是:
' +
JSON.stringify(result.value) +
'
',
confirmButtonText: 'Lovely!'
})
}
})

這里就簡單介紹這些示例,更多示例詳見官方文檔

彈框類型





相關項目

https://github.com/sweetalert2/ngx-sweetalert2

https://github.com/sweetalert2/sweetalert2-react-content

https://github.com/sweetalert2/sweetalert2-webpack-demo

https://github.com/sweetalert2/sweetalert2-parcel-demo

https://github.com/avil13/vue-sweetalert2

https://github.com/realrashid/sweet-alert

瀏覽器兼容性

總結

sweetalert2是原本sweetalert的升級版,功能更加強大,文檔更加全面,寫法更加先進,是Web開發中常用的插件,當然同樣優秀的還有很多,比如國產的layer.js也很好用,選擇一個適合自己的就成,今天的介紹就到這里,希望能對你有所幫助,如果還有更好的推薦,歡迎到評論區留言,謝謝!



小編推薦:欲學習電腦技術、系統維護、網絡管理、編程開發和安全攻防等高端IT技術,請 點擊這里 注冊賬號,公開課頻道價值萬元IT培訓教程免費學,讓您少走彎路、事半功倍,好工作升職加薪!

本文出自:https://www.toutiao.com/a6698325651209847299/

免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!


鮮花

握手

雷人

路過

雞蛋

相關閱讀

最新評論

 最新
返回頂部
云南快乐十分开奖结果前三