您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)layui進(jìn)度條渲染不出來(lái)怎么辦,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
解決思路如下:
提示:需要考慮靜態(tài)渲染和動(dòng)態(tài)渲染進(jìn)度條兩種情況。
<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)度條值是無(wú)法顯示的。
(1)靜態(tài)渲染
進(jìn)度條依賴element組件,如果未引入,進(jìn)度條將無(wú)法顯示。
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)上說(shuō),element模塊提供了element.progress()的基礎(chǔ)方法。
首先設(shè)置進(jìn)度條過(guò)濾器(lay-filter="demo"),然后就只需要在某個(gè)事件或者語(yǔ)句中執(zhí)行該方法,即可實(shí)現(xiàn)動(dòng)態(tài)改變精度條值。但對(duì)于精度條中顯示的百分比文字,用戶需要自己進(jìn)行改變。
element.progress('demo', '80%');
此時(shí)進(jìn)度條值改變:
關(guān)于layui進(jìn)度條渲染不出來(lái)怎么辦就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。