原文：https://mp.weixin.qq.com/s/sOVJjOkSrAZUFNwGl_6Twg，點擊鏈接查看更多技術內容。
一、介紹
以往大家如果想查看組件的使用效果，需要打開DevEco Studio構建工程。現在為了便於大家高效開發，文檔上線了JS UI組件在線預覽功能，無需本地構建工程，在線即可修改組件樣式等參數、一鍵預覽編譯效果。程序員直呼：簡直不要太方便啦！
讓我們通過下面這張動圖看一下效果~
看完動圖，你是不是也躍躍欲試？心動不如行動，復制下方鏈接，趕緊用起來吧~
JS API參考文檔（以Button組件為例）：
二、組件功能和開發步驟
目前我們已經上線了5個組件的在線預覽功能，分別為Button、List、Input、Image和Dialog。其中Input、Image和Dialog是近日上線的組件。接下來我們將以Button組件為例，為大家介紹組件的功能和開發步驟。
注：因篇幅有限，此處不再贅述其他組件，大家可自行前往官網查閱（末尾有組件鏈接哦~）。
1. Button
(1)功能介紹：
Button是按鈕組件，用來響應用戶的點擊操作，類型包括膠囊按鈕、圓形按鈕、文本按鈕、弧形按鈕和下載按鈕。開發者們可以在按鈕上綁定事件來響應點擊操作后的自定義行為。
在線預覽效果（圖1）：
圖1 Button在線預覽示例圖
(2)開發步驟：
① 首先，在hml文件中創建一個基本的按鈕組件（圖2），並在css文件中添加樣式。
<!-- xxx.hml --> <button class="buttons">按鈕</button>
/* xxx.css */
.buttons {
margin-top: 15px;
width: 45%;
height: 45px;
text-align: center;
font-size: 14px;
border-radius: 10px;
background-color: #317aff;
}
圖2 普通按鈕效果圖
② 接着，將按鈕文本更改為Loading（圖3），添加waiting屬性來顯示按鈕的等待效果。
<!-- xxx.hml --> <button class="buttons" waiting="true">Loading</button>
圖3 加載按鈕效果圖
③ 最后，為按鈕綁定setProgress方法來實時顯示下載進度條的進度（圖4），同時在js文件中對setProcess方法進行自定義，實現進度條的遞增顯示效果。
<!-- xxx.hml --> <button class="buttons" id="download-btn" waiting="true" type="download" onclick="setProgress">{{downloadText}}</button>
// xxx.js
export default {
data: {
progress: 10,
downloadText: "進度條按鈕"
},
setProgress(e) {
var i=0
var set= setInterval(()=>{
i+=10
this.progress=i
this.downloadText = this.progress + "%";
this.$element('download-btn').setProgress({ progress: this.progress });
if(this.progress>=100){
clearInterval(set)
this.downloadText="完成"
}
},1000)
}
} }
圖4 進度條顯示效果圖
其他組件請復制下方鏈接，自行前往官網查看：
Input組件：
List組件：
Image組件：
Dialog組件：
三、結語
好了，以上就是本期全部內容，期待大家通過JS UI在線預覽實現精美的組件，也歡迎大家持續關注開發者文檔上新內容。
大家可以通過官網在線反饋更多意見和需求哦！
