Einführung in das Rendern von Fortschrittsbalken in Laui

Berücksichtigen Sie sowohl das statische Rendering als auch das dynamische Rendering von Fortschrittsbalken.

 <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="yes">
        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
 </div>

Mit dem obigen Codeteil allein kann der Fortschrittsbalkenwert nicht angezeigt werden.

(1) Statisches Rendering

Der Fortschrittsbalken hängt von der Elementkomponente ab. Wenn er nicht eingeführt wird, wird der Fortschrittsbalken nicht angezeigt.

layui.use('element', function () {
    var element = layui.element;
});

Zu diesem Zeitpunkt zeigt der Fortschrittsbalken die folgenden Ergebnisse an:

(2) Dynamisches Rendern

Wenn Sie dynamisch rendern müssen Ändern Sie den Fortschrittswert des Fortschrittsbalkens. Auf der offiziellen Laui-Website heißt es, dass das Elementmodul die grundlegende Methode von element.progress() bereitstellt.

Stellen Sie zunächst den Fortschrittsbalkenfilter ein (lay-filter="demo"), und dann müssen Sie diese Methode nur in einem Ereignis oder einer Anweisung ausführen, um den Genauigkeitsbalkenwert dynamisch zu ändern. Den in der Genauigkeitsleiste angezeigten Prozenttext müssen Benutzer jedoch selbst ändern.

element.progress('demo', '80%');

Der Wert des Fortschrittsbalkens ändert sich zu diesem Zeitpunkt:

Für weitere Laui-Kenntnisse beachten Sie bitte das Tutorial zur Laui-Nutzung Spalte.

Das obige ist der detaillierte Inhalt vonEinführung in das Rendern von Fortschrittsbalken in Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!