mui mui-switch 开关

效果图

css

.mui-switch:before {
  content: '未加';
    color: #999;
}

.mui-switch.mui-active:before {
    content: '加了';
    color: #fff;
}

html

<div class="weui-cell">
   <div class="weui-cell__hd">
       <label>此次出车是否加过油：</label>
   </div>
   <div class="weui-cell__bd">
       <div id="IsOilCard" class="mui-switch mui-switch-blue " data-on="加了" data-off="未加">
           <div class="mui-switch-handle "></div>
       </div>
   </div>
</div>

js

//默认未加
$(function () {
    var isaddoil = $("#isaddoil").val();
    if (isaddoil == "") {
        $("#isaddoil").val("未加")
    }
})
//监听开关加油事件 加油时赋值
document.getElementById("IsOilCard").addEventListener("toggle", function (event) {
    if (event.detail.isActive) {
        var btnArray = ['没加油', '知道了'];
        mui.confirm('此次出车加油数据需要录入系统，未录入被查到会被罚款！', '提醒!', btnArray, function (e) {
            if (e.index == 1) {
                $("#isaddoil").val("加了")
                console.log("你关闭了报警推送");
            } else {
                $("#isaddoil").val("未加")
                mui("#IsOilCard").switch().toggle();
            }
        }, 'div')
    } else {

    }
})