vue中vant組件樣式失效問題及解決
更新時(shí)間：2022年04月25日 10:28:46 作者：Saga?Two
這篇文章主要介紹了vue中vant組件樣式失效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vant組件樣式失效
vue項(xiàng)目中引入vant組件，若發(fā)現(xiàn)vant組件樣式失效
通常有以下幾種解決方法
方法一：引入全局樣式
在引入vant組件的地方或者全局引入vant組件所有的樣式，引入方法為：在vue引入vant的頁面中，添加以下代碼：
import 'vant/lib/index.css'
這樣可以引入vant全部樣式，不過通常我們可以按需引入，如法二，局部引入部分樣式即可。
方法二：局部引入樣式
顧名思義，我們需要使用哪個(gè)組件，就引入哪個(gè)組件樣式即可，比如我們只使用按鈕組件，則只需要引入按鈕樣式，如下:
import 'vant/lib/button/style'
方法三：插件自動(dòng)引入
babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式。
第一步需要安裝插件：
# 安裝插件 npm i babel-plugin-import -D
第二步在***.babelrc***或***babel.config.js***的對應(yīng)位置添加如下代碼，重啟之后即可生效。
// 在.babelrc 中添加配置
// 注意：webpack 1 無需設(shè)置 libraryDirectory
{
? "plugins": [
? ? ["import", {
? ? ? "libraryName": "vant",
? ? ? "libraryDirectory": "es",
? ? ? "style": true
? ? }]
? ]
}
// 對于使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
? plugins: [
? ? ['import', {
? ? ? libraryName: 'vant',
? ? ? libraryDirectory: 'es',
? ? ? style: true
? ? }, 'vant']
? ]
};修改vant組件樣式
<style scoped> 添加scoped
? ? .searchIcon >>> .van-icon-search{color:#fff;}
</style>searchIcon是新起的class名字 van-icon-search是vant組件標(biāo)簽名字 中間用>>>穿透 即可修改vant自帶組件class名
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在網(wǎng)上找了好久關(guān)于左右過渡動(dòng)畫折疊的組件,沒有合適的代碼,效果類似于element UI中的Drawer抽屜組件,只不過ele中的都是懸浮的組件,工作中遇到的很多都是占用空間的展開折疊,網(wǎng)上很多也是上下展開收起的組件,于是就自己寫了一個(gè),分享給大家,感興趣的朋友參考下吧2023-11-11
基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件步驟解析
今天給大家介紹一款基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件，這個(gè)時(shí)鐘倒計(jì)時(shí)組件采用canvas動(dòng)畫的炫酷動(dòng)畫效果形式，根據(jù)剩余時(shí)間的多少變換顏色和旋轉(zhuǎn)扇形的速度，適合搶購、拍賣、下注等業(yè)務(wù)場景，且對移動(dòng)端友好,需要的朋友可以參考下2018-11-11
Vue數(shù)據(jù)表格增刪改查與表單驗(yàn)證代碼詳解
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)表格增刪改查與表單驗(yàn)證的相關(guān)資料,Vue可以通過使用組件化的方式來實(shí)現(xiàn)表格的增刪改查功能,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
TinyMCE是一個(gè)輕量級的基于瀏覽器的所見即所得編輯器,由JavaScript寫成,TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應(yīng)用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js列表渲染綁定jQuery插件的正確姿勢，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vue如何使用CSS自定義變量，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的相關(guān)資料,在使用Vue.js開發(fā)單頁面應(yīng)用時(shí)常常會遇到路由跳轉(zhuǎn)傳參的需求,需要的朋友可以參考下2023-07-07
用Axios Element實(shí)現(xiàn)全局的請求loading的方法
本篇文章主要介紹了用Axios Element實(shí)現(xiàn)全局的請求loading的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
Vue.js中class與style的增強(qiáng)綁定實(shí)現(xiàn)方法
由于Class和Style綁定使用頻繁，字符串拼接麻煩且易錯(cuò)，因此，Vue.js 做了專門的增強(qiáng)，表達(dá)式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組，本文給大家講解Vue.js中class與style的增強(qiáng)綁定知識，感興趣的朋友一起看看吧2023-04-04
這篇文章主要介紹了Vue 的異常處理機(jī)制，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11