Layui의 진행률 표시줄 렌더링 소개

풀어 주다: 2020-02-12 16:14:15
앞으로
6184명이 탐색했습니다.

Layui의 진행률 표시줄 렌더링 소개

진행률 표시줄의 정적 렌더링과 동적 렌더링을 모두 고려하세요.

로그인 후 복사

위 코드만으로는 진행률 표시줄 값을 표시할 수 없습니다.

(1) 정적 렌더링

진행률 표시줄은 요소 구성 요소에 따라 달라집니다. 도입되지 않으면 진행률 표시줄이 표시되지 않습니다.

layui.use('element', function () { var element = layui.element; });
로그인 후 복사

이때 진행률 표시줄에는 다음과 같은 결과가 표시됩니다.

Layui의 진행률 표시줄 렌더링 소개

(2) 동적 렌더링

진행률 표시줄의 진행률 값을 동적으로 변경해야 할 때 Layui 공식 홈페이지에서는 해당 요소를 다음과 같이 표시합니다. 모듈은 element.progress() 의 기본 메서드를 제공합니다.

먼저 진행률 표시줄 필터(lay-filter="demo")를 설정한 다음 이벤트나 명령문에서 이 메서드를 실행하기만 하면 정확도 표시줄 값을 동적으로 변경할 수 있습니다. 하지만 정밀도 막대에 표시되는 백분율 텍스트의 경우 사용자가 직접 변경해야 합니다.

element.progress('demo', '80%');
로그인 후 복사

이때 진행률 표시줄의 값이 변경됩니다.

Layui의 진행률 표시줄 렌더링 소개

layui에 대한 더 많은 지식을 알고 싶으시면layui 사용법 튜토리얼칼럼을 주목해주세요.

위 내용은 Layui의 진행률 표시줄 렌더링 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!