mint radio添加按钮样式及获取label值
mint radio只有列表选项模式:
,现添加按钮模式如下:
改造点如下:
1、添加属性ctype,默认值为plain,即原生列表选项模式,可传button,即按钮模式,(默认一行放两个按钮,如需要三个则button-3,依次类推),用法如下:
<mt-radio
class="prod-radio"
v-model="value1"
ctype="button-4"
@change="checkOne"
:options="options" />
2、radio.vue代码如下:
3、获取选中的标签值,方法如下:
其中getIndexOfArr为:
function getIndexOfArr(val,arr){
if (!arr) {
return -1;
}
for(let i = 0; i < arr.length; i++){
let tmp = arr[i].value || arr[i];
if(val === tmp){
return i;
}
}
}
新添加的样式如下:
.mint-radiolist-group {
font-size: 0;
min-height: 48px;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
margin-top:-10px;
color: #5A5A5A;
}
.mint-radiolist-button {
position: relative;
display: inline-block;
line-height: 48px;
width:48%;
margin-top:10px;
}
.mint-radiobox-button {
opacity: 0;
outline: none;
position: absolute;
margin: 0;
z-index: -1;
}
.mint-radiobox-inner {
line-height: 48px;
height:48px;
display: inline-block;
width:100%;
font-weight: 500;
white-space: nowrap;
vertical-align: middle;
background: #fff;
border: 1px solid #dcdfe6;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
-webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
transition: all .3s cubic-bezier(.645,.045,.355,1);
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
font-size: 18px;
border-radius: 4px;
}
.mint-radiobox-button[disabled]+.mint-radiobox-inner {
opacity: .6;
}
.mint-radiobox-button:checked+.mint-radiobox-inner {
/*color: #fff;*/
border-color: #26a2ff;
/*background-color: #26a2ff;*/
}