mint-ui如何自定义messageBox样式

初梦恋人

mint-ui自定义messageBox样式

mint-ui MessageBox官网文档：
http://mint-ui.github.io/docs/#/zh-cn2/message-box

• API：
  

• 里面并没有提供自定义的样式api
  

里面的内容是默认居中显示的，如果我们想改变里面的样式，比如自定义颜色，字体大小该怎么改的。

• 可以这样：
  

1. const html = `
   
2.         <div style="text-align:left;font-size:20px">
   
3.           内容内容内容内容内容内容<span style="color:red">我红了</span>
   
4.         </div>
   
5.       `
   
6. MessageBox ({
   
7.    title: '标题',
   
8.    message: html,
   
9.    confirmButtonText: '我知道了'
   
10. })

复制代码

• 结果如下
  

mint UI messagebox用法

1. this.$messagebox({
   
2.           title: '温馨提示',
   
3.           message: '订单支付成功',
   
4.           showCancelButton: true,
   
5.           confirmButtonText:"继续购物",
   
6.           cancelButtonText:"查看订单"
   
7.         }).then(action => {
   
8.           if(action == 'confirm'){
   
9.             console.log('继续购物')
   
10.           }else{
    
11.             console.log('查看订单')
    
12.           }
    
13.       })

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/284552mcc.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！