vue項(xiàng)目中Toast字體過小,沒有邊距的解決方案
vue Toast字體過小,沒有邊距
1、前段時間在寫項(xiàng)目的時候使用 vant 組件庫比較多，在使用vant中Toast時，在Chrome中手機(jī)模擬中測試正常，但是當(dāng)網(wǎng)頁放到手機(jī)中時字體顯示特別小，但是你在vue文件中怎么添加樣式都沒有用；
2、問題的原因可能是我之前寫的那種rem適配方案的問題；
解決辦法
在項(xiàng)目 App.vue 文件中添加樣式，在Elements中找到toast的類名。為其添加樣式，把字體的大小擴(kuò)大；并添加邊距就可以了；
樣式一定要寫在App.vue里面才會生效；
vue使用Toast最簡單方式
使用過Mint-ui組件庫的小伙伴都應(yīng)該知道Toast這個玩意。小編剛剛用的時候，覺得一切的邏輯都是十分完美，但是就是不出來。下面看看具體的使用步驟
1.安裝并引入mint-ui
① 安裝方式
npm i mint-ui -S
② 引入方式
引入的方式主要有兩種，一種是全局引入，一種是按需引入。一般推薦按需引入。因?yàn)槿忠霑r會引入很多不必要的代碼，使性能降低。
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顯示消息提示框，需要通過 @click 增加點(diǎn)擊事件
② 配置Toast參數(shù)
Toast的參數(shù)主要有三個：
message：消息提示框提示的內(nèi)容position：消息提示框出現(xiàn)的位置duration：消息提示框存在的時間，一般以毫秒為單位。
① 在html結(jié)構(gòu)中綁定點(diǎn)擊事件
<button @click="showToast">加入購物車</button>
② 在組件的methods中配置Toast的參數(shù)
methods:{
? ? ? ? showToast(){
? ? ? ? ? ? Toast({
? ? ? ? ? ? ? ? message: "加入購物車成功",
? ? ? ? ? ? ? ? position: 'center',
? ? ? ? ? ? ? ? duration: 1000
? ? ? ? ? ? })
? ? ? ? }
? ? }
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue調(diào)用高德地圖實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
vue中 router.beforeEach() 的用法示例代碼
導(dǎo)航守衛(wèi)主要是通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,本文通過示例代碼講解vue中 router.beforeEach() 的用法,感興趣的朋友跟隨小編一起看看吧2023-12-12
vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue-Router路由守衛(wèi)詳?shù)募?xì)用法教程
在Vue.js應(yīng)用中,Vue-Router是一個非常重要的插件,它允許我們實(shí)現(xiàn)頁面間的導(dǎo)航,然而,僅僅實(shí)現(xiàn)導(dǎo)航是不夠的,我們還需要在導(dǎo)航的不同階段進(jìn)行各種操作,本文將結(jié)合實(shí)際案例,詳細(xì)介紹Vue-Router路由守衛(wèi)的用法,需要的朋友可以參考下2024-12-12
在現(xiàn)代前端開發(fā)中,組件的重用性和異步加載是提升用戶體驗(yàn)和優(yōu)化性能的關(guān)鍵因素,在Vue 3中,創(chuàng)建異步組件變得更為便利,本文將探討如何在Vue 3中使用setup語法糖來創(chuàng)建異步組件,感興趣的小伙伴跟著小編一起來看看吧2024-09-09
本篇文章主要介紹了VueJS組件之間通過props交互及驗(yàn)證的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-09-09
vue項(xiàng)目中,前端使用axios與后臺進(jìn)行數(shù)據(jù)請求或者提交的時候,如果后臺沒有設(shè)置跨域,瀏覽器做數(shù)據(jù)請求的時候就會報錯,這篇文章主要給大家介紹了關(guān)于vue如何解決axios請求前端跨域問題的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue中使用WX-JSSDK的兩種方法,每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
vue中選項(xiàng)卡點(diǎn)擊切換且能滑動切換功能的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了vue中選項(xiàng)卡點(diǎn)擊切換且能滑動切換功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下2018-11-11
本文主要介紹了vue3實(shí)現(xiàn)長列表虛擬滾動的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01