vue項目中Toast字體過小,沒有邊距的解決方案
更新時間：2022年04月09日 15:54:13 作者：小六：
這篇文章主要介紹了vue項目中Toast字體過小，沒有邊距的解決方案。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue Toast字體過小,沒有邊距
1、前段時間在寫項目的時候使用 vant 組件庫比較多，在使用vant中Toast時，在Chrome中手機模擬中測試正常，但是當網(wǎng)頁放到手機中時字體顯示特別小，但是你在vue文件中怎么添加樣式都沒有用；
2、問題的原因可能是我之前寫的那種rem適配方案的問題；
解決辦法
在項目 App.vue 文件中添加樣式，在Elements中找到toast的類名。為其添加樣式，把字體的大小擴大；并添加邊距就可以了；
樣式一定要寫在App.vue里面才會生效；
vue使用Toast最簡單方式
使用過Mint-ui組件庫的小伙伴都應(yīng)該知道Toast這個玩意。小編剛剛用的時候，覺得一切的邏輯都是十分完美，但是就是不出來。下面看看具體的使用步驟
1.安裝并引入mint-ui
① 安裝方式
npm i mint-ui -S
② 引入方式
引入的方式主要有兩種，一種是全局引入，一種是按需引入。一般推薦按需引入。因為全局引入時會引入很多不必要的代碼，使性能降低。
import { Toast } from 'mint-ui';
Vue.use(Toast)2.引入Toast
盡管在前面的main.js文件引入了一次Toast之后，在使用的組件中也需要再次引用Toast，并且為了和用戶實現(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顯示消息提示框，需要通過 @click 增加點擊事件
② 配置Toast參數(shù)
Toast的參數(shù)主要有三個：
message：消息提示框提示的內(nèi)容position：消息提示框出現(xiàn)的位置duration：消息提示框存在的時間，一般以毫秒為單位。
① 在html結(jié)構(gòu)中綁定點擊事件
<button @click="showToast">加入購物車</button>
② 在組件的methods中配置Toast的參數(shù)
methods:{
? ? ? ? showToast(){
? ? ? ? ? ? Toast({
? ? ? ? ? ? ? ? message: "加入購物車成功",
? ? ? ? ? ? ? ? position: 'center',
? ? ? ? ? ? ? ? duration: 1000
? ? ? ? ? ? })
? ? ? ? }
? ? }
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金剛分別是State， Mutations，Actions，Getters，本文對這四大金剛做了詳細介紹，本文重點是給大家介紹vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感興趣的朋友一起看看吧2018-04-04
本篇文章主要介紹了Vue 過渡實現(xiàn)輪播圖效果，Vue 的過渡系統(tǒng)是內(nèi)置的，在元素從 DOM 中插入或移除時自動應(yīng)用過渡效果。有需要的小伙伴可以參考下。2017-03-03
這篇文章主要為大家介紹了effect返回runner單測實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本文主要介紹了Vue.js的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
Vue3-KeepAlive,多個頁面使用keepalive方式
這篇文章主要介紹了Vue3-KeepAlive，多個頁面使用keepalive方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue自動化路由的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
下面小編就為大家分享一篇vue.js 獲取select中的value實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
小編給大家通過本文詳細介紹了關(guān)于vue.js項目的構(gòu)建、打包、發(fā)布的全過程，文章很以后價值，值得你參考。2017-11-11
這篇文章主要介紹了antd中table展開行默認展示,且不需要前邊的加號操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關(guān)于axios不能使用Vue.use()的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的理解和學(xué)習(xí)具有一定的參考學(xué)習(xí)價值，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01