向nuxt3项目添加甜警报2
向nuxt3项目添加甜警报2
提问于 2022-05-16 15:15:25
我正努力将甜警报2作为插件集成到nuxt3应用程序中。我正在尝试使用vue-甜警报2，但在某种程度上它定义了全局变量。
// Inside the install function
vue.prototype.$swal = swalFunction;
vue['swal'] = swalFunction;请你帮我一下，如何访问这些全局变量？文件没有显示这一点。
我想我的目标是在我的插件里有这样的东西：
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueSweetalert2)
return {
provide: {
swal: swalFunction // <- how to access this ?
}
}
})回答 2
Stack Overflow用户
回答已采纳
发布于 2022-05-17 07:59:01
我正在学习nuxt3 too.Here是如何在我的nuxt3应用程序中使用甜警报2的。
plugins/swal.js
import Swal from "sweetalert2";
import "@sweetalert2/theme-bootstrap-4";
const $swal = {
install: (Vue, options) => {
Vue.config.globalProperties.$swal = Swal.mixin(options);
},
}
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use($swal, {
reverseButtons: true,
confirmButtonText: "confirmText",
cancelButtonText: "cancelText",
confirmButtonColor: "#84bd00",
});
});组件中的使用
<script>
export default {
const fn = getCurrentInstance().appContext.config.globalProperties;
fn.$swal.fire({
title: "hello",
timer: 2000,
});
}
</script>或者通过提供和注入来使用，我的plugins/swal.js将是这样的。
import Swal from "sweetalert2";
import "@sweetalert2/theme-bootstrap-4";
const options = {
reverseButtons: true,
confirmButtonText: "confirmText",
cancelButtonText: "cancelText",
confirmButtonColor: "#84bd00",
}
const $swal = {
install: (Vue, options) => {
Vue.provide("$swal", Swal.mixin(options));
},
}
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use($swal, options);
});组件中的使用
<script>
export default {
const swal = inject("$swal");
swal.fire({
title: "hello",
timer: 2000,
});
}
</script>希望能帮上忙。
Stack Overflow用户
发布于 2022-08-06 15:31:48
你可以让它变得更简单：
插件/甜警报2.ts
import Swal from 'sweetalert2'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.provide('swal', Swal)
})<script setup>中的用法
const { $swal } = useNuxtApp()
$swal.fire({
title: 'Error!',
text: 'Do you want to continue',
icon: 'error',
confirmButtonText: 'Cool'
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72261546
复制相关文章
相似问题
腾讯云开发者
