mint-ui如何自定義messageBox樣式
mint-ui自定義messageBox樣式
mint-ui MessageBox官網(wǎng)文檔:
http://mint-ui.github.io/docs/#/zh-cn2/message-box
- API:
- 里面并沒(méi)有提供自定義的樣式api
里面的內(nèi)容是默認(rèn)居中顯示的,如果我們想改變里面的樣式,比如自定義顏色,字體大小該怎么改的。
- 可以這樣:
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: '標(biāo)題', message: html, confirmButtonText: '我知道了' })
- 結(jié)果如下
mint UI messagebox用法
this.$messagebox({ ? ? ? ? ? title: '溫馨提示', ? ? ? ? ? message: '訂單支付成功', ? ? ? ? ? showCancelButton: true, ? ? ? ? ? confirmButtonText:"繼續(xù)購(gòu)物", ? ? ? ? ? cancelButtonText:"查看訂單" ? ? ? ? }).then(action => { ? ? ? ? ? if(action == 'confirm'){ ? ? ? ? ? ? console.log('繼續(xù)購(gòu)物') ? ? ? ? ? }else{ ? ? ? ? ? ? console.log('查看訂單') ? ? ? ? ? } ? ? ? })
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用prop可以渲染但是打印臺(tái)報(bào)錯(cuò)的解決方式
今天小編就為大家分享一篇vue使用prop可以渲染但是打印臺(tái)報(bào)錯(cuò)的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例,幫助大家更好的理解和使用前端框架進(jìn)行開(kāi)發(fā),感興趣的朋友可以了解下2021-02-02基于Vue實(shí)現(xiàn)頁(yè)面全屏封裝的詳細(xì)步驟
眾所周知:目前可視化大屏,視頻播放等常見(jiàn)功能都需要用到全屏,本文將使用兩種技術(shù)實(shí)現(xiàn)全屏功能的封裝,讓不同技術(shù)棧的同學(xué)都可以輕松掌握,好了,讓我們來(lái)實(shí)現(xiàn)一個(gè)既兼容性強(qiáng)又易于管理的全屏功能組件吧,需要的朋友可以參考下2024-08-08vue組件屬性(props)及私有數(shù)據(jù)data解析
這篇文章主要介紹了vue組件屬性(props)及私有數(shù)據(jù)data解析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue中el-checkbox、el-switch綁定值問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于vue中el-checkbox、el-switch綁定值問(wèn)題的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01Vite創(chuàng)建Vue3項(xiàng)目及Vue3使用jsx詳解
vite是新一代的前端構(gòu)建工具,下面這篇文章主要給大家介紹了關(guān)于Vite創(chuàng)建Vue3項(xiàng)目以及Vue3使用jsx的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue項(xiàng)目中引入外部文件的方法(css、js、less)
本篇文章主要介紹了Vue項(xiàng)目中引入外部文件的方法(css、js、less),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-07-07vue實(shí)現(xiàn)消息向上無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)消息向上無(wú)縫滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04詳解Vue2+Echarts實(shí)現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard(附源碼)
本篇文章主要介紹了詳解Vue2+Echarts實(shí)現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard(附源碼),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03