Vant主題定制方法
- 使用場景：
- 第一種：完全替換主題色或其他樣式
- 1.main.js引入樣式原檔案
- 2.創建less檔案
- 3.修改配置
- 4.修改樣式
- 第二種：直接覆寫樣式
- 1.找到class類名
- 2.修改樣式
使用場景：
需要修改vant組件的顏色或其他的樣式時，可以用以下方法進行自定義修改，
一個簡單的效果：
第一種：完全替換主題色或其他樣式
用Vant官方提供的方法進行定制：
1.main.js引入樣式原檔案
// 引入全部樣式
import 'vant/lib/index.less';
// 引入單個組件樣式
import 'vant/lib/button/style/less';
2.創建less檔案
3.修改配置
用vue-cli搭建的可以直接在vue.config.js中更改配置：
const path = require("path");
//less檔案的路徑
const myTheme = path.resolve(__dirname, "./src/assets/less/vantChange.less");
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
hack: `true; @import "${myTheme}";`
}
},
}
},
}
4.修改樣式
參考官網提供的樣式變數
第二種：直接覆寫樣式
1.找到class類名
在控制臺選中元素，獲取class類名，雙擊選中復制
2.修改樣式
<style lang="less" scoped>
.van-sidebar-item--select::before{
background-color:#CCCCFF;
}
.van-sidebar-item--select, .van-sidebar-item--select:active{
background-color:#FFCCCC;
color:white;
}
</style>
大功告成啦
撒花~ ???
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/241355.html
標籤：其他
上一篇：Taro中使用getUserInfo獲取資訊及授權遇坑
下一篇：不一樣的函式防抖和節流