SweetAlert2 在Vue 3中的使用

白菜泡馍
1,536 阅读8分钟

SweetAlert2

1.下载依赖

npm install sweetalert2

2.在使用的页面引入

import Swal from 'sweetalert2';

3.基本使用

示例

image.png

  Swal.fire({
    icon: 'success', //error\warning\info\question
    title: 'SweetAlert2',
    text: '使用文本',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '确认',
    confirmButton: false,
    cancelButtonText: '取消',
    footer: '<span>footer</span>',
  }).then((result) => {
    // 点击确认时:result.isConfirmed = true,否则反之
    if (result.isConfirmed) {
      console.log('确认');
    } else if (result.isDenied) {
      console.log('取消');
    }
  });

4.参数介绍

（解释仅供参考，如有错误，多谢指出） 详细可参考官网，

title ------ 弹出窗口的标题，支持html格式。
titleText ------ 弹出窗口的标题，作为文本。有助于避免HTML注入。
html ------弹出窗口的html描述。如果同时提供text和html参数，则将使用html。
text ------弹出框的描述。如果text和html参数同时提供，html将被使用。
icon------弹出窗口的图标。SweetAlert2带有5个内置图标，将显示相应的图标动画:警告，错误，成功，信息和问题。它可以放在键“icon”下的数组中，也可以作为函数的第三个参数传递。
iconColor ------用于更改图标的颜色
iconHtml ------图标的自定义HTML内容。
showClass ------ CSS类动画时，显示一个弹出(淡入)。
hideClass ------当隐藏一个弹出窗口(淡出)时用于动画的CSS类。
footer ------弹出窗口的页脚。可以是纯文本或HTML
backdrop------ SweetAlert2是否应该显示全屏点击解散背景。可以是一个布尔值，也可以是一个字符串，它将被分配给CSS的background属性。
toast ------是否应将警报视为toast通知。该选项通常与位置参数和计时器结合使用。祝酒词从不自动聚焦。
target------容器元素，用于将弹出窗口添加到
input ------输入字段类型，可以是文本，电子邮件，密码，号码，电话，范围，文本区域，选择，单选，复选框，文件和url。
width ------弹出窗口宽度，包括填充(box-sizing: border-box)。可以在任何CSS单位(px, em/rem， %)
padding------弹出窗口填充。可以在任何CSS单位(px, em/rem， %)
color ------标题、内容和页脚的颜色(CSS color属性)。默认颜色是“#545454”。
background ------弹出窗口背景(CSS背景属性)。默认的背景是'#fff'
position------弹出窗口位置，可以是'top'， 'top-start'， 'top-end'， 'center'， 'center-start'， 'center-end'， 'bottom'， 'bottom-start'，或'bottom-end'
grow------与窗口位置配对，设置弹出窗口应该增长的方向，可以设置为'行'，'列'，'全屏'，或false
customClass ------A custom CSS class for the popup:
timer ------弹出窗口的自动关闭定时器。单位为ms(毫秒)。
timerProgressBar ------如果设置为true，计时器将在弹出窗口的底部有一个进度条。大多数情况下，这个功能是有用的toast ..
heightAuto ------默认情况下，SweetAlert2设置html和body的CSS高度为auto!important。如果此行为与项目的布局不兼容，请将heightAuto设置为false
allowOutsideClick ------如果设置为false，用户不能通过单击弹出窗口的外部来消除弹出窗口。你也可以通过一个自定义函数返回一个布尔值，例如，如果你想禁止外部点击弹出窗口的加载状态。
allowEscapeKey ------如果设置为false，用户不能通过按Esc键取消弹出窗口。你也可以传递一个自定义函数返回一个布尔值，例如，如果你想禁用Esc键弹出窗口的加载状态。
allowEnterKey ------如果设置为false，用户不能通过按Enter或空格键确认弹出，除非他们手动聚焦确认按钮。你也可以传递一个自定义函数返回一个布尔值。
stopKeydownPropagation ------如果设置为false, SweetAlert2将允许keydown事件传播到文档。
keydownListenerCapture ------对于那些使用SweetAlert2和引导模态的人有用。默认情况下keydownListenerCapture为false，这意味着当用户按下Esc键时，SweetAlert2和Bootstrap模式都将关闭。设置keydownListenerCapture为true来修复该行为。
showConfirmButton ------如果设置为false，将不会显示“确认”按钮。
showDenyButton ------如果设置为true，将显示“拒绝”按钮。它可以是有用的，当你想要一个弹出3个按钮。
showCancelButton ------如果设置为true，将显示“取消”按钮，用户可以单击该按钮来取消模态。
confirmButtonText ------使用此更改“确认”按钮上的文本..
denyButtonText ------使用此更改“拒绝”按钮上的文本..
cancelButtonText ------使用此更改“取消”按钮上的文本..
confirmButtonColor ------使用此命令更改“Confirm”按钮的背景颜色。默认颜色是#3085d6。
denyButtonColor ------使用此命令更改“拒绝”按钮的背景色。默认颜色是#dd6b55。
cancelButtonColor ------使用此命令更改“取消”按钮的背景色。默认颜色是#aaa ..
confirmButtonAriaLabel ------使用此命令更改“Deny”按钮的aria-label
cancelButtonAriaLabel ------使用此命令更改“取消”按钮的aria-label
buttonsStyling ------为按钮应用默认样式。如果你想使用你自己的类(例如Bootstrap类)，将此参数设置为false
reverseButtons ------如果你想反转默认按钮的位置(“确认”-按钮在右侧)，设置为true
focusConfirm ------如果你想按标签顺序聚焦第一个元素，而不是默认的“确认”按钮，则设置为false。
returnFocus ------如果你不想在模态关闭后将焦点返回到调用模态的元素，则设置为false。
focusDeny ------如果你想在默认情况下聚焦“Deny”按钮，则设置为true。
focusCancel ------如果你想在默认情况下聚焦“取消”按钮，则设置为true。
showCloseButton ------设置为true显示弹出窗口右上角的关闭按钮。
closeButtonHtml ------使用此命令更改关闭按钮的内容。
loaderHtml ------使用它来改变加载器的HTML内容..
showLoaderOnConfirm ------设置为true禁用按钮，显示加载器而不是确认按钮。与preConfirm参数结合使用。
showLoaderOnDeny ------设置为true禁用按钮，显示加载器而不是拒绝按钮。与preDeny参数结合使用。
scrollbarPadding ------设置为false，当页面滚动条被隐藏而弹出显示时禁用正文填充调整。
preConfirm ------确认前执行的函数，可以是async(promise - returns)或sync。返回(或解析)值可以是:False，防止弹出窗口关闭任何传递该值作为结果的东西。sval .fire()的值Undefined保持默认的result.value。
preDeny ------在拒绝之前执行的函数，可以是async(promise - returns)或sync。返回(或解析)值可以是:False，防止弹出窗口关闭任何传递该值作为结果的东西。sval .fire()的值Undefined保持默认的result.value。
returnInputValueOnDeny ------如果你想返回输入值作为结果。值时拒绝弹出，设置为true。否则，拒绝将设置结果。值为false
imageUrl ------为弹出窗口添加一个自定义图标。应该包含图像路径或URL的字符串。
imageWidth ------ 如果设置了imageUrl，则可以指定imageWidth来描述图像宽度。可以是任何CSS单位(px, em/rem， %)。
imageHeight ------ 自定义图像高度。可以是任何CSS单位(px, em/rem， %)。
imageAlt ------ 自定义图像图标的替代文本。
inputLabel ------ 输入字段标签。
inputPlaceholder ------输入字段占位符。
inputValue ------ 输入字段初始值。如果选择输入类型，inputValue将表示选中的option标记。如果输入类型是复选框，inputValue将表示选中的状态。如果输入类型是文本，电子邮件，数字，电话或文本区域承诺可以接受为inputValue。
inputOptions ------ 如果输入参数设置为“select”或“radio”，则可以提供选项。可以是Map或普通对象，其中的键表示选项值，值表示选项文本。您还可以提供plain，object或Map作为表示一组选项的值，作为<optgroup>键的标签。最后，您还可以提供一个使用这些类型之一进行解决的Promise 。
inputAutoFocus ------ 当弹出窗口显示时，自动聚焦输入。将此参数设置为false以禁用自动聚焦。
inputAutoTrim ------ 自动删除结果字符串两端的空白。将此参数设置为false以禁用自动修整。
inputAttributes ------HTML输入属性(例如，min, max, autocomplete, accept)被添加到输入字段。对象键表示属性名称，对象值表示属性值。
inputValidator ------ 输入字段的验证器，可以是async(承诺返回)或sync。返回(或解析)值可以是:一个表示成功的错误值(未定义，null, false),表示失败的字符串值(错误消息)。
validationMessage ------ 默认验证器的自定义验证消息(电子邮件，url)。
progressSteps ------ 进度步骤，对队列有用。
currentProgressStep ------ 当前活动进度步骤。
progressStepsDistance ------ 进度步骤之间的距离。可以是任何CSS单位(px, em/rem， %)
willOpen ------ 弹出生命周期钩子。在弹出窗口显示在屏幕上之前同步运行。提供弹出DOM元素作为参数
didOpen ------ 弹出生命周期钩子。在弹出窗口显示在屏幕上之后异步运行。提供弹出DOM元素作为参数
didRender ------ 弹出生命周期钩子。同步运行后弹出的DOM已更新(即。就在弹出窗口被重新绘制在屏幕上之前)。

- 提供弹出DOM元素作为参数。
- 通常，这将发生在sval .fire()或sval .update()之后。
- 如果你想在弹出框的DOM中执行更改，在sval .update()中幸存下来，更喜欢使用didRender而不是willOpen

willClose ------ 弹出生命周期钩子。同步运行时，弹出窗口关闭由用户交互(而不是由于另一个弹出窗口被触发)。提供弹出DOM元素作为参数。
didClose ------ 弹出生命周期钩子。异步运行后，弹出窗口已被用户交互处置(而不是由于另一个弹出窗口被触发)。
didDestroy ------ 弹出生命周期钩子。在弹出窗口被用户交互或另一个弹出窗口破坏后同步运行。如果你有清理操作，你需要可靠地执行每次弹出窗口关闭，首选didDestroy而不是didClose。

avatar
文章
阅读
粉丝