layui進(jìn)度條無法渲染出來的原因是什么

這篇文章給大家分享的是有關(guān)layui進(jìn)度條無法渲染出來的原因是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

前言：

layui進(jìn)度條渲染分為兩種情況，分別是：靜態(tài)渲染和動(dòng)態(tài)渲染。

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

單獨(dú)上面一段代碼，進(jìn)度條值是無法顯示的。

（1）靜態(tài)渲染

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

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

此時(shí)進(jìn)度條顯示結(jié)果如下：

（2）動(dòng)態(tài)渲染

需要?jiǎng)討B(tài)改變進(jìn)度條的進(jìn)度值時(shí)，layui官網(wǎng)上說，element模塊提供了element.progress()的基礎(chǔ)方法。

首先設(shè)置進(jìn)度條過濾器（lay-filter="demo")，然后就只需要在某個(gè)事件或者語句中執(zhí)行該方法，即可實(shí)現(xiàn)動(dòng)態(tài)改變精度條值。但對(duì)于精度條中顯示的百分比文字，用戶需要自己進(jìn)行改變。

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

此時(shí)進(jìn)度條值改變：

感謝各位的閱讀！關(guān)于“l(fā)ayui進(jìn)度條無法渲染出來的原因是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！