甜警报CSS样式未在Vue应用程序中应用

Question

我已经在我的Vue应用程序(2.6版)中安装了Vue-甜警报2。我在main.js中包括了以下内容

import VueSweetalert2 from 'vue-sweetalert2';

Vue.use(VueSweetalert2);

我有一个带有单击处理程序的简单按钮：

 <button v-on:click="alertDisplay">Click me</button>

     alertDisplay() {
      this.$swal('Heading', 'this is a Heading', 'OK');
     },

这如预期的那样起作用。当点击按钮时，sweetAlert模式会显示，但是它会出现在页面的左下角，没有任何样式。我环顾四周，但在Vue应用程序的背景下，我找不到解决这个问题的明确理由或解决方案。

任何想法都是非常感谢的！

Answer 1

当您使用vue-甜警报2时，您必须导入css文件以获得所需的结果。

在main.js文件中使用以下代码行：

import 'sweetalert2/dist/sweetalert2.min.css';

此外，如果要更改字体系列，请使用以下css代码：

.swal2-title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

我希望它对你有帮助;)