将甜蜜警报 2 添加到 nuxt3 项目
Add sweet alert 2 to nuxt3 project
我正在努力将 sweet alert 2 作为插件集成到 nuxt3 应用程序中。我正在尝试使用 vue-sweetalert2 但我在某些时候它定义了全局变量。
// 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 ?
}
}
})
我正在学习 nuxt3 too.Here 我是如何在我的 nuxt3 应用程序中使用 sweet alert 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>
或者provide注入使用,我的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>
希望对您有所帮助。
我正在努力将 sweet alert 2 作为插件集成到 nuxt3 应用程序中。我正在尝试使用 vue-sweetalert2 但我在某些时候它定义了全局变量。
// 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 ?
}
}
})
我正在学习 nuxt3 too.Here 我是如何在我的 nuxt3 应用程序中使用 sweet alert 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>
或者provide注入使用,我的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>
希望对您有所帮助。