layui進度條渲染不出來怎么辦

這篇文章將為大家詳細講解有關layui進度條渲染不出來怎么辦，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

解決思路如下：

提示：需要考慮靜態渲染和動態渲染進度條兩種情況。

 <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>

單獨上面一段代碼，進度條值是無法顯示的。

（1）靜態渲染

進度條依賴element組件，如果未引入，進度條將無法顯示。

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

此時進度條顯示結果如下：

（2）動態渲染

需要動態改變進度條的進度值時，layui官網上說，element模塊提供了element.progress()的基礎方法。

首先設置進度條過濾器（lay-filter="demo")，然后就只需要在某個事件或者語句中執行該方法，即可實現動態改變精度條值。但對于精度條中顯示的百分比文字，用戶需要自己進行改變。

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

此時進度條值改變：

關于layui進度條渲染不出來怎么辦就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。