VS v1.0.0

这次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

<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

<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

<div class="weui_cell weui_vcode">
    <div class="weui_cell_ft">
        <img src="./images/vcode.jpg">
    </div>
</div>

New

<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

<div class="weui_cells weui_cells_access">
    <a class="weui_cell">...</a>
</div>

New

<div class="weui-cells">
    <a class="weui-cell weui-cell_access">...</a>
</div>

uploader

头部以前是嵌套cell来实现左右布局。新版是用了新类名来实现：

Old

<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

<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

<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

<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

<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

<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

<div class="weui_toptips weui_warn"></div>

New

<div class="weui-toptips weui-toptips_warn"></div>

另外，若想看老版本的代码和DEMO：https://github.com/weui/weui/releases/tag/v0.4.3 老版本的DEMO在dist/example/index.html。