需求:mint-ui中的messagebox 的样式满足不了自己的需求,需要自己根据文档设置自定义样式,
代码如下:
<mt-cell title="解绑" is-link @click.native="unbind">
<img slot="icon" src="/static/images/unbind.png" width="24" height="24">
</mt-cell>
js部分:
unbind: function () {
const htmls = `
<div class="box">
<div class="isunbind">是否解绑孩子?</div>
</div>
`;
MessageBox.confirm('', {
message: htmls,
title: '',
showConfirmButton:true,
showCancelButton:true,
cancelButtonClass:'cancelButton',
confirmButtonClass:'confirmButton',
confirmButtonText:'确定',
cancelButtonText:'暂不'
}).then(action => {
if (action == 'confirm') {
console.log('abc');
}
}).catch(err => {
if (err == 'cancel') {
console.log('123');
}
});
}
由于样式是自定义的,也就是
cancelButtonClass:’cancelButton’,
confirmButtonClass:’confirmButton’,
这两行代码,部分css如下:
<style>
.cancelButton{
background: #959595 !important;
width: 1.6rem !important;
height: .6rem;
color: #fff !important;
border-radius: .05rem;
border: none;
margin: .2rem !important;
}
.confirmButton{
background: #d9534f !important;
width: 1.6rem !important;
height: .6rem;
color: #fff !important;
border-radius: .05rem;
border: none;
margin: .2rem !important;
}
</style>
最终结果如图所示: