mint ui MessageBox.prompt()添加自定义inputCheckbox框
小白一枚,因工作需要,使用到mint-ui的MessageBox弹出框,但是默认给我样式与公司要求不太符合,在网上也没找到类似案例(可能是我太愚钝),就自己摸索着写了一个mint ui MessageBox.prompt()添加自定义inputCheckbox框,记录一下,如有错误还请大佬们指正。
废话不多说直接贴代码
//触发按钮
<button @click="prompt()">取消订单</button>
//方法
prompt(){
const html = '<p id="p"><input type="Checkbox" id="r" value="对车辆不满意"> <label for="r">对车辆不满意</label></p> <p id="p"><input type="Checkbox" id="a" value="价格太高"> <label for="a">价格太高</label></p> <p id="p"><input type="Checkbox" id="d" value="车辆和实际不符"> <label for="d">车辆和实际不符</label></p>'
MessageBox({
$type:'prompt',
title: '取消原因',
inputPlaceholder:'请输入取消订单的原因',
message: html,
showCancelButton:true,
showInput:true
}).then(({ value, action})=>{
var length = $('.mint-msgbox-message p input').length
var arr=[]
for(var i = 0 ; i<length;i++){
if($('.mint-msgbox-message p input')[i].checked==true){//判断Checkbox框是否选中
arr.push($('.mint-msgbox-message p input')[i].value)
}
}
console.log(arr,value);
}).catch(err=>{
console.log(err);
})
},
效果图
输出值