mui自定义单选样式

效果：

QQ图片20200811141253.png

mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可，dom结构如下：

 <div class="mui-input-row liver">
                    <label>肝功能</label>
                    <ul class="mui-table-view-radio" id="liver">
                        <li class="mui-table-view-cell">
                            正常
                        </li>
                        <li class="mui-table-view-cell">
                            异常
                        </li>
                    </ul>

                </div>

列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点，如下代码打印当前选中项的innerHTML：

// 肝功能
var list = document.querySelector('#liver');
list.addEventListener('selected',function(e){
    console.log("当前选中的为："+e.detail.el.innerText);
});

css

.section .mui-table-view-cell:after {
  height: 0;
}

.section .liver label {
  flex-shrink: 0;
}

.section .liver ul {
  display: flex;
}

.section .liver ul li {
  width: 0.96rem;
  height: 0.48rem;
  border: 1px solid whitesmoke;
  margin-right: 0.2rem;
  text-align: center;
  font-size: 0.24rem;
  color: #444444;
  padding: 0;
}

.section .liver ul li.mui-selected {
  border-color: #e54647;
  color: #e54647;
}