mint-ui如何自定義messageBox樣式
更新時間:2023年05月16日 14:40:05 作者:laishaojiang
這篇文章主要介紹了mint-ui如何自定義messageBox樣式問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
mint-ui自定義messageBox樣式
mint-ui MessageBox官網(wǎng)文檔:
http://mint-ui.github.io/docs/#/zh-cn2/message-box
- API:
- 里面并沒有提供自定義的樣式api
里面的內(nèi)容是默認居中顯示的,如果我們想改變里面的樣式,比如自定義顏色,字體大小該怎么改的。
- 可以這樣:
const html = ` <div style="text-align:left;font-size:20px"> 內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容<span style="color:red">我紅了</span> </div> ` MessageBox ({ title: '標題', message: html, confirmButtonText: '我知道了' })
- 結(jié)果如下
mint UI messagebox用法
this.$messagebox({ ? ? ? ? ? title: '溫馨提示', ? ? ? ? ? message: '訂單支付成功', ? ? ? ? ? showCancelButton: true, ? ? ? ? ? confirmButtonText:"繼續(xù)購物", ? ? ? ? ? cancelButtonText:"查看訂單" ? ? ? ? }).then(action => { ? ? ? ? ? if(action == 'confirm'){ ? ? ? ? ? ? console.log('繼續(xù)購物') ? ? ? ? ? }else{ ? ? ? ? ? ? console.log('查看訂單') ? ? ? ? ? } ? ? ? })
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue組件屬性(props)及私有數(shù)據(jù)data解析
這篇文章主要介紹了vue組件屬性(props)及私有數(shù)據(jù)data解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue中el-checkbox、el-switch綁定值問題詳解
這篇文章主要給大家介紹了關于vue中el-checkbox、el-switch綁定值問題的相關資料,文中通過代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01Vite創(chuàng)建Vue3項目及Vue3使用jsx詳解
vite是新一代的前端構(gòu)建工具,下面這篇文章主要給大家介紹了關于Vite創(chuàng)建Vue3項目以及Vue3使用jsx的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08詳解Vue2+Echarts實現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard(附源碼)
本篇文章主要介紹了詳解Vue2+Echarts實現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard(附源碼),具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-03-03