javascript - 引用错误: "Swal is not defined"

Question

我正在使用 codeigniter 和 VueJs 以及 sweet Alert javascript 库开发一个小项目。但是当我在 VueJs 方法中调用 swall.fire({}) 时，我的控制台中出现错误 ReferenceError: "Swal is not Define" 。这是我的代码:

deleteCustomers(customer_id){
        Swal.fire({
           title: 'Are you sure?',
           text: "You won't be able to revert this!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#d33',
           confirmButtonText: 'Yes, delete it!'
           }).then((result) => {
              axios.post('/Thirdparty/deleteCustomers', {id : customer_id}).then(function(response){
                 console.log(response.data);
                 //alert(response.data.error);
                 Swal.fire(
                 'Deleted!',
                 'Your file has been deleted.',
                 'success'
                 );
              });
           });
     }

当然，我已经使用以下方式导入了 swall:import Swal from 'sweetalert2';

注意:swall.fire 只能在 Vuejs 方法中工作

Answer 1

这里是在vue js上实现Sweet Alert的快速方法

npm install sweetalert2

在您的 app.js 上注册甜蜜警报，使其可以在您的所有组件中访问

import swal from 'sweetalert2';
window.Swal = swal;

然后在示例的任何组件中(Example.vue)

<template>
  ...
</template>
<script>
   export default{
     methods:{
       test(){
         Swal.fire('Test!', 'Hello test message','success');
      } 
    }
   }

更多甜蜜提醒方式可参见here