Question

我有一个带有下图的进度条的吐司通知，我喜欢圆角，但是我不知道如何隐藏加载条圆角之外的部分。鉴于此example中的设置，我该怎么做。我还想知道如何反转指示器的方向，使其开始变满并变空，然后通知消失。 Lobibox似乎没有开箱即用的选项，但我真的很想添加它们。感谢您的帮助！

以下是Lobibox通知的示例：

Lobibox.notify('success', {    
    size: 'mini',
    rounded: true,
    delayIndicator: true,
    msg: 'Project Saved Successfully!',
    iconSource: 'fontAwesome',
    position: 'top right',
    delay: 50000,
});

Answer 1

您可以覆盖CSS

Lobibox.notify('success', {
  size: 'mini',
  rounded: true,
  delayIndicator: false,
  msg: 'Project Saved Successfully!',
  iconSource: 'fontAwesome',
  position: 'top right',
  delay: 20000,
  delayIndicator: true
});

body {
  background-color: black;
}

.lobibox-notify .lobibox-delay-indicator {
  left: 22px !important;
  width: 360px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lobibox@1.2.7/dist/css/lobibox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lobibox@1.2.7/dist/js/lobibox.min.js"></script>

Answer 2

弄清楚如何反转指示器方向。在源代码中找到_addDelay函数，并用下面的更新版本覆盖它。这增加了设置options.reverseDelayIndicator = true的能力以反转指示器的方向。如果您在解决方案中包含以下css片段，它还可以使指示器在圆角和方形边缘通知上正确显示。

var _addDelay = function ($el) {
    if (!me.$options.delay) {
        return;
    }
    if (me.$options.delayIndicator) {
        var delay = $('<div class="lobibox-delay-indicator"><div></div></div>');
        if (me.$options.rounded) {
            delay.addClass("lobibox-delay-rounded");
        } else {
            delay.removeClass("lobibox-delay-rounded");
        }
        $el.append(delay);
    }
    var time = 0;
    var interval = 1000 / 30;
    var currentTime = new Date().getTime();
    var timer = setInterval(function () {
        if (me.$options.continueDelayOnInactiveTab) {
            time = new Date().getTime() - currentTime;
        } else {
            time += interval;
        }

        if (me.$options.reverseDelayIndicator) {
            var width = 100 - (100 * time / me.$options.delay);
            if (width <= 0) {
                width = 0;
                me.remove();
                timer = clearInterval(timer);
            }
        } else {
            var width = 100 * time / me.$options.delay;
            if (width >= 100) {
                width = 0;
                me.remove();
                timer = clearInterval(timer);
            }
        }
        if (me.$options.delayIndicator) {
            delay.find('div').css('width', width + "%");
        }

    }, interval);

    if (me.$options.pauseDelayOnHover) {
        $el.on('mouseenter.lobibox', function () {
            interval = 0;
        }).on('mouseleave.lobibox', function () {
            interval = 1000 / 30;
        });
    }
};

CSS要同时显示圆形和方形指示器：

.lobibox-notify .lobibox-delay-indicator.lobibox-delay-rounded {
    left: 22px;
    width: calc(100% - 44px);
}

如何使进度条与父项匹配曲线

2 个答案: