Windows 对象上可用的警告() 方法,以便在您的应用程序中发送通知和警告,实际上并不适合大多数情况。 首先,它很丑,没有办法自定义。 幸运的是,一个名为 SweetAlert 2(SweetAlert 的继任者)的流行的库为我们提供了一个响应性、可自定义和易于访问的伟大的替代品。
vue-sweetalert2是SweetAlert 2的包装程序,可以轻松地将功能集成到您的Vue应用程序中。
下面我们将讨论基本的设置和使用。
安装
在使用 npm 或 Yarn 的 Vue.js 项目中安装 vue-sweetalert:
1# npm
2$ npm install vue-sweetalert2
3
4# Yarn
5$ yarn add vue-sweetalert2
使用
安装了该软件包后,您只需将 VueSweetalert2 组件添加到您的 main.js 文件中:
1[label main.js]
2import Vue from 'vue'
3import VueSweetalert2 from 'vue-sweetalert2';
4import App from './App.vue';
5
6Vue.use(VueSweetalert2);
7
8new Vue({
9 el: '#app',
10 render: h => h(App)
11});
现在在主应用程序中,您可以使用 $swal 函数访问 Vue-Sweetalert2 的所有方法:
1[label app.vue]
2<template>
3 <!-- button used to trigger event -->
4 <button v-on:click="alertDisplay">Click me</button>
5</template>
6
7<script>
8 export default {
9 data() {
10 return {
11 text: ''
12 }
13 },
14 methods: {
15 alertDisplay() {
16 // $swal function calls SweetAlert into the application with the specified configuration.
17 this.$swal('Heading', 'this is a Heading', 'OK');
18 }
19 }
20 }
21<script>
详细示例
SweetAlert 2 配备了我们将在本节中探索的其他内置方法,您还可以参阅 API 文档以获取更多示例。
通过输入数据
如果您想要一个可以接受用户输入的模式/弹出式窗口,只需在配置中使用输入密钥转到 $swal:
1<template>
2 <button v-on:click="alertDisplay">Click Me!</button>
3</template>
4
5<script>
6 export default {
7 data() {
8 return {}
9 },
10 methods: {
11 alertDisplay() {
12 // Adding an input method from SweetAlert 2 automatically binds an input form.
13 this.$swal({
14 title: 'What is your Name?',
15 input: 'text',
16 inputPlaceholder: 'Enter your name here',
17 showCloseButton: true,
18 });
19 }
20 }
21 }
22</script>
定义自定义HTML
您也可以添加自己的标记作为模式的一部分. 只需在配置中使用HTML键:
1<template>
2 <button v-on:click="alertDisplay">Click Me!</button>
3</template>
4
5<script>
6 export default {
7 data() {
8 return {}
9 },
10 methods: {
11 alertDisplay() {
12 this.$swal({
13 title: '<i>Custom HTML</i>',
14 // add a custom html tags by defining a html method.
15 html:
16 'This is an <em> emaphazied text </em>, ' +
17 '<a href="#">links</a> ' +
18 '<strong>And other tags</strong>',
19 showCloseButton: true,
20 showCancelButton: true,
21 focusConfirm: false,
22 })
23 }
24 }
25 }
26</script>
基于承诺的火
SweetAlert 2 使用承诺来跟踪用户如何与通知互动. 在下面的示例中,如果承诺以真值解决,我们会显示成功提示,否则我们会显示另一个提示提示,显示替代消息:
1<template>
2 <button v-on:click="alertDisplay">Click Me!</button>
3</template>
4
5<script>
6 export default {
7 data() {
8 return {}
9 },
10 methods: {
11 alertDisplay() {
12 this.$swal({
13 title: 'Are you sure?',
14 text: 'You can\'t revert your action',
15 type: 'warning',
16 showCancelButton: true,
17 confirmButtonText: 'Yes Delete it!',
18 cancelButtonText: 'No, Keep it!',
19 showCloseButton: true,
20 showLoaderOnConfirm: true
21 }).then((result) => {
22 if(result.value) {
23 this.$swal('Deleted', 'You successfully deleted this file', 'success')
24 } else {
25 this.$swal('Cancelled', 'Your file is still intact', 'info')
26 }
27 })
28 }
29 }
30 }
31</script>
那么你就去吧! 那真的很快,很容易? 现在你可以用几行代码在你的应用程序中创建简单而简单的警报和通知。