mui 之 开关

说明

官网地址：https://dev.dcloud.net.cn/mui/ui/#switch

开关（默认样式）

快捷键：mSwitch

• 设置 mui-active 类，默认为开启状态。
• 加上 mui-switch-blue，可变成蓝色主题。

<div class="mui-input-row">
    <label>默认开关</label>
    <!-- 默认开启 -->
    <div class="mui-switch mui-active mui-switch-blue">
        <div class="mui-switch-handle"></div>
    </div>
</div>

开关（迷你版）

就是没有 开关（off、on）文字

<div class="mui-input-row">
    <label>迷你版开关</label>
    <div class="mui-switch mui-switch-mini mui-active">
      <div class="mui-switch-handle"></div>
    </div>
</div>

修改显示文字

通过修改伪类的内容来修改

<style type="text/css">
    #switch-sex::before {
        content: "男";
    }
    #switch-sex.mui-active:before{
        content: "女";
    }
</style>
<div class="mui-input-row">
    <label>性别</label>
    <div id="switch-sex" class="mui-switch mui-active">
        <div class="mui-switch-handle"></div>
    </div>
</div>

检测 开关 状态

主要就是查看是否包含 mui-active

var isActive = document.getElementById("mySwitch").classList.contains("mui-active");
if(isActive){
  console.log("打开状态");
}else{
  console.log("关闭状态");  
}

控制 开关 状态

mui("#mySwitch").switch().toggle();