根据短信自动设置sweetalert2宽度

Question

我正在使用 sweetalert2 库来显示基本警报消息，但有些消息比其他消息更广泛。

是否可以将警报容器的witdh设置为auto，以便在一行中修复消息？

作为默认行为，我认为宽度设置为 360px，但我需要一个变通方法让它自动...希望有人能帮助我...谢谢

PD：如果重要的话，我使用的是 Symfony 4.4。默认配置为：

const Toast = Swal.mixin({
    toast: true,
    position: 'top',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
});

以及模板中的触发事件：

<script>
    {% for type, msgs in app.session.flashBag.all() %}
        {% for msg in msgs %}
            Toast.fire({
                icon: '{{ type }}',
                title: '{{ msg }}'
            });
       {% endfor %}
    {% endfor %}
</script>

Answer 1

经过一些研究但运气不佳，尝试错误是获得合适解决方案的最佳方法。

首先，从 sweetalert2 库中覆盖一些 css 样式：

.swal2-container {
    padding: 0.4em;
}

.swal2-toast {
    max-width: inherit;
}

body.swal2-toast-shown .swal2-container {
    width: unset;
}

.swal2-popup.swal2-toast .swal2-title {
    margin: 9px 5px auto;
}

然后，在脚本标签中创建一个 canvas 元素并使用字体样式计算画布的宽度...

<script>
        {% for type, msgs in app.session.flashBag.all() %}
        {% for msg in msgs %}

        inputText = '{{ msg }}';
        font = "0.875rem Nimrod MT";

        canvas = document.createElement("canvas");
        context = canvas.getContext("2d");
        context.font = font;
        width = context.measureText(inputText).width;
        formattedWidth = Math.ceil(width) + 100;

        Toast.fire({
            icon: '{{ type }}',
            title: '{{ msg }}',
            width: formattedWidth,
        });

        {% endfor %}
        {% endfor %}
    </script>

最终结果：

希望这个解决方案对其他人有帮助...

根据短信自动设置sweetalert2宽度

set sweetalert2 width auto according to text message

javascript

css

sweetalert2