在1.0.0在代碼層面上做了哪些改變 · WeUI 中文文檔

這次WeUI 1.0由于命名規范發生了巨大改變，因此在這里列出一些代碼的改動點，希望對大家有所幫助： ### 關于命名由之前單一的下劃線改成`weui-aaa__bbb-bbb_ccc-ccc`這種形式，橫杠為連詞符，雙下劃線區分Block和Element（BEM），單下劃線連接Modify。下面列出幾個例子： |Old|New| |---|---| |`weui_cells`|`weui-cells`| |`weui_cell_bd`|`weui-cell__bd`| |`weui_btn_primary`|`weui-btn_primary`| |`weui_btn_plain_primary`|`weui-btn_plain-primary`| ### button 除了命名以外，其它改變不大。 ### cell #### 之前必須顯示定義weui_cell_primary來規定撐滿的是hd,bd還是ft。現在默認是bd來撐滿，weui-cell_primary變成實現頂部對齊的擴展類。 Old ```html <div class="weui_cell"> <div class="weui_cell_hd"></div> <div class="weui_cell_bd weui_cell_primary">...</div> <div class="weui_cell_ft"></div> </div> ``` New ```html <div class="weui-cell"> <div class="weui-cell__hd"></div> <div class="weui-cell__bd">...</div> <div class="weui-cell__ft"></div> </div> ``` #### 帶驗證碼的輸入框，img必須定義weui-vcode-img的類名 Old ```html <div class="weui_cell weui_vcode"> <div class="weui_cell_ft"> <img src="./images/vcode.jpg"> </div> </div> ``` New ```html <div class="weui-cell weui-cell_vcode"> <div class="weui-cell__ft"> <img class="weui-vcode-img" src="./images/vcode.jpg"> </div> </div> ``` #### 帶箭頭的列表，由之前的weui_cells_access改為單獨控制的weui-cell_access Old ```html <div class="weui_cells weui_cells_access"> <a class="weui_cell">...</a> </div> ``` New ```html <div class="weui-cells"> <a class="weui-cell weui-cell_access">...</a> </div> ``` ### uploader #### 頭部以前是嵌套cell來實現左右布局。新版是用了新類名來實現： Old ```html <div class="weui_uploader"> <div class="weui_uploader_hd weui_cell"> <div class="weui_cell_bd weui_cell_primary">圖片上傳</div> <div class="weui_cell_ft">0/2</div> </div> </div> ``` New ```html <div class="weui-uploader"> <div class="weui-uploader__hd"> <p class="weui-uploader__title">圖片上傳</p> <div class="weui-uploader__info">0/2</div> </div> </div> ``` Old|New ---|--- `weui_uploader_status`|`weui-uploader__file_status` `weui_uploader_status_content`|`weui-uploader__file-content` `weui_uploader_input_wrp`|`weui-uploader__input-box` ### loading Old ```html <div class="weui_loading"> <div class="weui_loading_leaf weui_loading_leaf_0"></div> <div class="weui_loading_leaf weui_loading_leaf_1"></div> <div class="weui_loading_leaf weui_loading_leaf_2"></div> <div class="weui_loading_leaf weui_loading_leaf_3"></div> <div class="weui_loading_leaf weui_loading_leaf_4"></div> <div class="weui_loading_leaf weui_loading_leaf_5"></div> <div class="weui_loading_leaf weui_loading_leaf_6"></div> <div class="weui_loading_leaf weui_loading_leaf_7"></div> <div class="weui_loading_leaf weui_loading_leaf_8"></div> <div class="weui_loading_leaf weui_loading_leaf_9"></div> <div class="weui_loading_leaf weui_loading_leaf_10"></div> <div class="weui_loading_leaf weui_loading_leaf_11"></div> </div> ``` New ```html <i class="weui-loading weui-icon_toast"></i> ``` ### panel： * 所有的weui_media都改成了weui-media-box * 去掉了weui_panel_access ### searchbar Old|New ---|--- `weui_search_outer`|`weui-search-bar__form` `weui_search_inner`|`weui-search-bar__box` `weui_search_text`|`weui-search-bar__label` `weui_search_cancel`|`weui-search-bar__cancel-btn` ### tab * 去掉了weui_tab_bd_item_active，以前這個類只是實現display:block而已，新版本就去掉了。 ### dialog Old ```html <div class="weui-dialog__ft"> <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">輔助操作</a> <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a> </div> ``` New ```html <div class="weui-dialog__ft"> <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">輔助操作</a> <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a> </div> ``` ### toptips Old ```html <div class="weui_toptips weui_warn"></div> ``` New ```html <div class="weui-toptips weui-toptips_warn"></div> ``` 另外，若想看老版本的代碼和DEMO：https://github.com/Tencent/weui/releases/tag/v0.4.3 老版本的DEMO在dist/example/index.html。