我有一個 Laravel 8 專案，安裝了 vue-sweetalert2。我想定義一次 Toast 行為，然后在我的組件中呼叫它。
現在我有這個代碼：
/js/components/Mypage.vue
<script>
export default {
data: function () {
return { ... };
},
mounted() { ... },
methods: {
myMethod: function () {
const Toast = this.$swal.mixin({
toast: true,
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
});
axios
.post("/api/something")
.then((res) => {
Toast.fire({
icon: "success",
title: "Tessera rinnovata",
});
});
...
</script>
當然，這很好用，但是正如您所看到的，Toast 是在方法內部定義的，我無法在其他地方重新使用它。
我想在 app.js （也許）中定義它，而不是在任何地方訪問它，但是如果我按原樣移動 app.js 中的代碼，我會收到一個錯誤，告訴我 $swal 未定義。我嘗試使用 Swal 而不是 $swal ......沒有任何改變。
/js/app.js
import VueSweetalert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";
window.Vue = require("vue").default;
import VueRouter from "vue-router";
Vue.use(VueRouter);
Vue.use(VueSweetalert2);
const Toast = $swal.mixin({
toast: true,
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
});
那么，我該如何定義 Toast 一次呢？
uj5u.com熱心網友回復：
看起來您正在嘗試this.$swal使用初始化選項設定 SweetAlert 實體（在您的組件中）。這可以在安裝vue-sweetalert插件時完成。的第二個引數Vue.use()是插件選項：
// js/app.js
import Vue from 'vue'
import VueSweetAlert from 'vue-sweetalert2'
Vue.use(VueSweetAlert, {
toast: true,
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
})
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395512.html
標籤：javascript Vue.js laravel-8
上一篇：Vuejs-異步等待問題