标签: sweetalert2

我想创建一个条件并为每个人调用一个 swal (Sweetalert2)。但只有一个 swal 运行。我该怎么做？

function validateEmail(email) {
  var regex = /\S+@\S+\.\S+/;
  return regex.test(email);
}

function validateBirth(data) {
  var regex = /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
  return regex.test(data);
}

function validacao() {
  var data = document.getElementById('birth').value;
  var email = document.getElementById('email').value;
  if (!validateBirth(data)) {
    swal(
      'title..',
      'text..',
      'type..'
    );
  }
  if (!validateEmail(email)) {
    swal(
      'title..',
      'text..',
      'type..'
    );
  }
}

我正在尝试更改swal2 错误的SweetAlert2弹出图标颜色。

我已经为它更改了节点包中的变量颜色，并将变量放在我的组件 scss 和全局 scss 文件中，并且它不会改变最糟糕的部分是如果我进入检查元素并在那里更改颜色在

.swal2-icon.swal2-error {
    border-color: #f27474;
}

它会改变但再次模仿所有相关文件中的 css 并且没有任何变化，对此的任何帮助将不胜感激。

关闭模式后，我强制浏览器滚动到页面顶部以查看任何错误消息。集成SweetAlert2模块以确认提交后，应用程序将在关闭后自动向下滚动回提交按钮，而不是停留在顶部。

submit() {
    swal({
      title: "Submit application",
      html: "All submissions are final",
      type: "warning",
      showCancelButton: true,
      confirmButtonText: "Yes, delete it!",
      cancelButtonText: "Cancel"
    }).then(result => {
          window.scrollTo(0,0);
        }
    );
  }

正如你所看到的，我试图在多个区域强制滚动到顶部，这有效，但随后它又回到了底部。请参阅随附的 gif 作为演示。

有想法该怎么解决这个吗？

引导程序 4

SweetAlert2 7.28.2

编辑：在简单的 JSFiddle https://jsfiddle.net/s8f12xad/ 中转载

我想知道我怎么可能把一个链接在生成按钮confirmButtonText的Sweet Alert 2。

目标是当您按下该按钮时重定向到从数据库中删除记录的页面，到目前为止，我<a>在一个简单的按钮中使用了一个简单的链接 ( )，但我想添加这个小确认。

这是代码：

按钮如下：

我从sweetalert2 ^7.32.4 ? ^8.11.7，我阅读了v8.0.0 的重大更改，但我没有任何代码直接调用受影响的函数之一。

我想知道是什么导致了这个神秘的错误：（TypeError: this is undefined）

我正在使用 SweetAlert2 javascript 库来显示弹出窗口。SweetAlert2 是 SweetAlert 的一个分支，不再维护。SweetAlert2 允许我添加这样的单选按钮

// inputOptions can be an object or Promise
var inputOptions = new Promise(function(resolve) {
    resolve({
      '#ff0000': 'Red',
      '#00ff00': 'Green',
      '#0000ff': 'Blue'
    });
});

swal({
  title: 'Select color',
  input: 'radio',
  inputOptions: inputOptions,
  inputValidator: function(result) {
    return new Promise(function(resolve, reject) {
      if (result) {
        resolve();
      } else {
        reject('You need to select something!');
      }
    });
  }
}).then(function(result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  });
})

SweetAlert2 为无线电输入指定“swal2-radio”名称，如下所示

<input id="swal2-radio-1" type="radio" …

我正在尝试使用SweetAlert2，但在出现问题时无法显示错误消息。此外，当用户按下“取消”按钮时，控制台会显示错误：未捕获（承诺）取消。

简而言之，我的网站上有一个按钮。如果用户按下该按钮，则会出现确认对话框（使用 SweetAlert2）。这是我的代码：

swal({
    title: "Are you sure?",
    text: "You will not be able to undo this action!",
    type: "warning",
    showCancelButton: true,
    cancelButtonText: 'No, cancel!',
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, do it!",
    allowOutsideClick: false
    preConfirm: function () {
        return axios.put('/api/endpoint')
        .then(response => {
            console.log('success')
        })
        .catch(error => {
            console.log('failure')
            swal({
                title: "Something went wrong",
                type: "error",
            })
        });
    }
}).then(function (result) {
    if (result.value) {
        swal('Deleted!', 'Your file has been deleted.', 'success')
    } else if (result.dismiss === 'cancel') { …

我收到“无法调用类型缺少调用签名的表达式。类型 'typeof import("sweetalert2")' 没有兼容的调用签名。” 在角度中使用 SWAL 时出现此错误。

我的 package-cli.json 看起来像

    "ng2-sweetalert2": {
    "version": "0.0.8",
    "resolved": "https://registry.npmjs.org/ng2-sweetalert2/-/ng2-sweetalert2-0.0.8.tgz",
    "integrity": "sha1-+VkDV2dqeLIMf3eFTLVt/cJda0Q=",
    "requires": {
        "lodash.assign": "^4.0.8",
        "sweetalert2": "^5.2.0"
    },
    "dependencies": {
        "es6-promise": {
            "version": "4.2.6",
            "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.6.tgz",
            "integrity": "sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q=="
        },
        "sweetalert2": {
            "version": "5.3.8",
            "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-5.3.8.tgz",
            "integrity": "sha1-YALBhFPQYMQLnMVL+DoBDHHjlik=",
            "requires": {
                "es6-promise": "^4.2.6"
            }
        }
    }
}

"sweetalert2": {
      "version": "8.9.0",
      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-8.9.0.tgz",
      "integrity": "sha512-gI+wL44QRbfd6FvRVB8KKLQPhD/8jP3XUNrvYGcSlU7IA09dQtQw3rrLCbM3c+HY0L3O8VTz1Gvu29n8ryIgag=="
}

我在 package.json 依赖项中有以下内容

"dependencies":{
"ng2-sweetalert2": "0.0.8",
"sweetalert2": "^8.9.0",}

在组件中我的代码如下所示

import * as swal from 'sweetalert2';

        swal({
          text: 'Login Successful!', …

默认情况下颜色为白色。是否可以更改 sweetalert2 的模态背景颜色？

我尝试用 CSS 来改变它，就像我在此处和此处处理其他问题一样，如下所示：

.sweet-alert 
{
   background-color: #2f2f2f96;
}

但我什么也没得到

我使用 sweetalert 问题功能

Swal.mixin({
  input: 'text',
  confirmButtonText: 'Next →',
  showCancelButton: true,
  progressSteps: ['1', '2', '3']
}).queue([
  {
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
  },
  'Question 2',
  'Question 3'
]).then((result) => {
  if (result.value) {
    Swal.fire({
     title: 'All done!',
     html:
       'Your answers: <pre><code>' +
         JSON.stringify(result.value) +
        '</code></pre>',
      confirmButtonText: 'Lovely!'
    })
  }
})

我希望我可以将模式颜色更改为灰色

如果无法从服务器检索数据，我尝试弹出 sweetalert

我在 main.js 中导入了 Sweet Alert ：

import VueSweetalert2 from 'vue-sweetalert2'
import 'sweetalert2/dist/sweetalert2.min.css'

const app = createApp(App)
app.use(VueSweetalert2)
app.mount('#app')

在 Table.vue 组件内，我尝试调用 swal 但收到错误消息 (undefined $this.swal) ：

<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'

export default {
    setup() {
        let transactions = ref([])

        onMounted(() => {
            getTransactions()
        })

        async function getTransactions() {
            try {
                let { data } = await axios.get('http://127.0.0.1:8000/api/transactions')
                transactions.value = data.data
            } catch(e) {
                this.$swal('Something went wrong.')
            }
        }

        return { …