【前端样式】Sweetalert2简单用法

1、 先安装sweetalert2库：

        npm install sweetalert2

2、引用SweetAlert2 库：

        import Swal from 'sweetalert2' ；

3、代码拷过去直接去测试，vue代码

<template><div><el-button style="color: #C03639" @click="test">测试Swal文本框弹窗</el-button><el-button style="color: #C03639" @click="test2">测试Swal确认操作</el-button><el-button style="color: #C03639" @click="test3">测试Swal 弹窗定时关闭操作</el-button><el-button style="color: #C03639" @click="test4">测试Swal 警告操作</el-button><el-button style="color: #C03639" @click="test5">测试Swal 信息提示操作</el-button><el-button style="color: #C03639" @click="test6">测试Swal 错误提示操作</el-button><el-button style="color: #C03639" @click="test7">测试Swal 多个按钮操作</el-button><el-button style="color: #C03639" @click="test8">测试Swal 自定义操作</el-button></div></template><script>
import Swal from 'sweetalert2' /
export default {name: 'index',methods: {//测试Swal 文本框弹窗test(){Swal.fire({title: '请输入您的名字',input: 'text',inputPlaceholder: '姓名',showCancelButton: true,}).then((result) => {if (result.isConfirmed) {Swal.fire(`你好, ${result.value}!`);}});},//测试Swal 确认弹框操作test2(){Swal.fire({title: '确认保存?',text: "请确认您要保存这些更改。",icon: 'info',showCancelButton: true,confirmButtonText: '保存',cancelButtonText: '取消'}).then((result) => {if (result.isConfirmed) {// 执行保存操作}});},//测试Swal 弹框定时取消操作test3(){Swal.fire({title: '操作成功!',text: '数据已保存。',icon: 'success',timer: 2000,timerProgressBar: true,willClose: () => {console.log('弹窗将关闭');}});},//测试Swal 警告操作test4(){Swal.fire({title: '警告!',text: '您即将离开此页面，未保存的数据将丢失。',icon: 'warning',showCancelButton: true,confirmButtonText: '继续',cancelButtonText: '取消'}).then((result) => {if (result.isConfirmed) {// 执行某个操作}});},test5(){Swal.fire({title: '操作成功!',text: '您的数据已成功保存。',icon: 'success',confirmButtonText: '确定'});},test6(){Swal.fire({title: '出错了!',text: '发生了一些问题，请稍后再试。',icon: 'error',confirmButtonText: '好的'});},test7(){Swal.fire({title: '选择一个选项',icon: 'question',showCancelButton: true,confirmButtonText: '选项 A',cancelButtonText: '选项 B',}).then((result) => {if (result.isConfirmed) {// 处理选项 A} else {// 处理选项 B}});},test8(){Swal.fire({title: '<strong>你说不会在爱情里犯错</strong>',icon: 'info',html: '<b>也说过会一直的爱我!</b>',showCloseButton: true,focusConfirm: false,confirmButtonText: '明白了',});},//进入页面 选择性别！openBox() {Swal.fire({title: '选择您的性别',icon: 'question',showCancelButton: true,confirmButtonText: '我是男生',cancelButtonText: '我是女生',}).then((result) => {if (result.isConfirmed) {// 处理选项 男Swal.fire({title: '哇靠，你是彭于晏！',imageUrl: '/images/pyy.jpg',confirmButtonText: '嘿嘿，别夸'});} else {// 处理选项 女Swal.fire({title: '哇靠，你是刘亦菲！',imageUrl: '/images/lyf.jpg',confirmButtonText: '这都被你发现啦'});}});},},</script>

 test按钮效果：

test1按钮效果：

 

test3按钮效果：

 

test4效果：

 

test5效果：

 

test6效果：

 

test7效果：

 扩展实现：

自定义测试：