vue如何使用swiper插件修改左右箭頭的默認樣式
更新時間：2023年01月14日 11:05:33 作者：土生土長的IU
這篇文章主要介紹了vue如何使用swiper插件修改左右箭頭的默認樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用swiper插件修改左右箭頭的默認樣式
效果圖
修改箭頭的背景，以及顏色
.swiper-button-prev, .swiper-button-next{
color: #fff;
background: #5e5f5e;
}
修改箭頭的大小
.swiper-button-prev:after, .swiper-button-next:after {
font-size: 14px;
}
vue中修改swiper樣式問題
當你在vue中使用swiper時，你會發(fā)現(xiàn)，你直接修改swiper里面的樣式，是修改不成功的。
原因
vue文件中的template，和style 都會經(jīng)過vue-loader的編譯。
在style標簽上使用了 scoped 屬性的話，template中手寫的元素和style之間會通過vue-loader生成的一個自定義屬性，形成呼應關系，style只對對應的template起作用。
編譯過程中由swiper 生成的分頁器標簽不會經(jīng)過vue-loader的編譯，所以選不到。
解決方法
方法一：樣式穿透
<style lang="scss" scoped>
::v-deep .swiper-pagination-bullet {
width: 6px;
height: 6px;
background-color: #FFFFFF;
opacity: 1;
}
::v-deep .swiper-pagination-bullet-active {
width: 14px;
height: 6px;
border-radius: 3px;
opacity: 1;
background-color: #FFFFFF;
}
</style>方法二：在<style lang="scss" scoped></style>下面再寫一個<style></style>不加scoped
<style>
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background-color: #FFFFFF;
opacity: 1;
}
.swiper-pagination-bullet-active {
width: 14px;
height: 6px;
border-radius: 3px;
opacity: 1;
background-color: #FFFFFF;
}
</style>修改樣式之前：
修改樣式之后：
我就是把分頁的樣式修改了一下。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
由于添加門店時，需要選擇門店的省、市、區(qū)、詳細地址、以及門店的經(jīng)緯度信息，本文給大家分享Vue集成百度地圖實現(xiàn)位置選擇功能，感興趣的朋友一起看看吧2022-06-06
本篇文章主要介紹了vue.js國際化 vue-i18n插件的使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
本文主要介紹了vue3整合springboot打完整jar包,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-09-09
Vue 讀取HTMLCollection列表的length為0問題
這篇文章主要介紹了Vue 讀取HTMLCollection列表的length為0問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
axios是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，下面這篇文章主要給大家介紹了關于vue.js簡單配置axios的相關資料，需要的朋友們可以參考借鑒，需要的朋友們下面來一起學習學習吧。2017-12-12
Vue中ref、computed與reactive使用頻率現(xiàn)象分析(示例詳解)
這篇文章主要分析了Vue中的ref、computed和reactive三個響應式API的使用頻率和優(yōu)勢,ref適合處理簡單數(shù)據(jù)類型的響應式需求,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了vue $nextTick實現(xiàn)原理深入詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
下面小編就為大家?guī)硪黄獀ue2導航根據(jù)路由傳值,而改變導航內容的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
解決element-ui的el-select選擇器的@blur事件失效的坑
這篇文章主要介紹了解決element-ui的el-select選擇器的@blur事件失效的坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue?router權限管理實現(xiàn)不同角色顯示不同路由
本文主要介紹了vue?router權限管理實現(xiàn)不同角色顯示不同路由，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03