1、前段時(shí)間在寫項(xiàng)目的時(shí)候使用 vant 組件庫(kù)比較多，在使用vant中Toast時(shí)，在Chrome中手機(jī)模擬中測(cè)試正常，但是當(dāng)網(wǎng)頁(yè)放到手機(jī)中時(shí)字體顯示特別小，但是你在vue文件中怎么添加樣式都沒(méi)有用；

2、問(wèn)題的原因可能是我之前寫的那種rem適配方案的問(wèn)題；

解決辦法

在項(xiàng)目 App.vue 文件中添加樣式，在Elements中找到toast的類名。為其添加樣式，把字體的大小擴(kuò)大；并添加邊距就可以了；

樣式一定要寫在App.vue里面才會(huì)生效；

vue使用Toast最簡(jiǎn)單方式

使用過(guò)Mint-ui組件庫(kù)的小伙伴都應(yīng)該知道Toast這個(gè)玩意。小編剛剛用的時(shí)候，覺(jué)得一切的邏輯都是十分完美，但是就是不出來(lái)。下面看看具體的使用步驟

1.安裝并引入mint-ui

① 安裝方式

npm i mint-ui -S

② 引入方式

引入的方式主要有兩種，一種是全局引入，一種是按需引入。一般推薦按需引入。因?yàn)槿忠霑r(shí)會(huì)引入很多不必要的代碼，使性能降低。

import { Toast } from 'mint-ui';
Vue.use(Toast)

2.引入Toast

盡管在前面的main.js文件引入了一次Toast之后，在使用的組件中也需要再次引用Toast，并且為了和用戶實(shí)現(xiàn)交互，需要引入index.js文件和style.css文件

<script>
import { Toast } from 'mint-ui';
import '../../assets/js/index.js'
</script>

<style>
@import '../../assets/css/book/style.css';
</style>

3.使用Toast

① 綁定事件

為觸發(fā)Toast顯示消息提示框，需要通過(guò) @click 增加點(diǎn)擊事件

② 配置Toast參數(shù)

Toast的參數(shù)主要有三個(gè)：

message：消息提示框提示的內(nèi)容
position：消息提示框出現(xiàn)的位置
duration：消息提示框存在的時(shí)間，一般以毫秒為單位。

① 在html結(jié)構(gòu)中綁定點(diǎn)擊事件

<button @click="showToast">加入購(gòu)物車</button>

② 在組件的methods中配置Toast的參數(shù)

methods:{
? ? ? ? showToast(){
? ? ? ? ? ? Toast({
? ? ? ? ? ? ? ? message: "加入購(gòu)物車成功",
? ? ? ? ? ? ? ? position: 'center',
? ? ? ? ? ? ? ? duration: 1000
? ? ? ? ? ? })
? ? ? ? }
? ? }