mint-ui如何自定義messageBox樣式

Posted on by

mint-ui自定義messageBox樣式

mint-ui MessageBox官網文檔：

http://mint-ui.github.io/docs/#/zh-cn2/message-box

  • API：

  • 裡面並沒有提供自定義的樣式api

裡面的內容是默認居中顯示的，如果我們想改變裡面的樣式，比如自定義顏色，字體大小該怎麼改的。

  • 可以這樣：
const html = `
        <div style="text-align:left;font-size:20px">
          內容內容內容內容內容內容<span style="color:red">我紅瞭</span>
        </div>
      `
 MessageBox ({
   title: '標題',
   message: html,
   confirmButtonText: '我知道瞭'
 })
  • 結果如下

mint UI messagebox用法

this.$messagebox({
          title: '溫馨提示',
          message: '訂單支付成功',
          showCancelButton: true,
          confirmButtonText:"繼續購物",
          cancelButtonText:"查看訂單"
        }).then(action => {
          if(action == 'confirm'){
            console.log('繼續購物')
          }else{
            console.log('查看訂單')
          }
      })

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：