首頁  >  文章  >  web前端  >  layui中進度條渲染介紹

layui中進度條渲染介紹

尚
轉載
2020-02-12 16:14:156316瀏覽

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(&#39;element&#39;, function () {
    var element = layui.element;
});

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

layui中進度條渲染介紹

#(2)動態渲染

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

先設定進度條過濾器(lay-filter="demo"),然後就只需要在某個事件或語句中執行該方法,即可實現動態改變精確度條值。但對於精確度條中顯示的百分比文字,使用者需要自行進行變更。

element.progress(&#39;demo&#39;, &#39;80%&#39;);

此時進度條值改變:

layui中進度條渲染介紹

更多layui知識請關注layui使用教學欄位。

以上是layui中進度條渲染介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除