Vue修改iview組件的樣式的兩種方案(element同)
使用vue必然會(huì)用到等iview組件庫(kù)，但是iview的組件的樣式跟自己寫的div的樣式修改不太一樣
第一種方案
先引入一個(gè)iview按鈕
<Button>Default</Button>
F12，點(diǎn)開開發(fā)者人員工具，點(diǎn)擊選擇器，或者Ctrl+Shift+C
然后點(diǎn)擊剛才添加的Default按鈕，如下就是按鈕的不同情況的樣式
ivu-btn為主樣式
可以現(xiàn)在開發(fā)者工具中調(diào)試好你想要的樣式
然后在該頁(yè)面的.vue文件中修改樣式
//必須是style標(biāo)簽才能修改,<style scoped>無(wú)法修改view組件的樣式
<style>
.ivu-btn {
font-size: 112px;
}
</style>
效果如下
第二種方案 /deep/
采用deep，不過(guò)時(shí)候deep不好使，需要換成>>>
<style lang="scss" scoped>
.login /deep/ .layout-main {
padding: 0;
}
</style>
實(shí)例
html
<i-input class="txtput" v-model="meetingDate.meetingTitle" placeholder="請(qǐng)輸入..." ></i-input>
css
/* 穿透進(jìn)iview的input框 */
.txtput >>> .ivu-input{
width: 75%;
border: none;
outline:none;
font-size: 20px;
border-radius:0px !important;
margin-left: 0%;
}
小結(jié)
修改組件樣式一定要謹(jǐn)慎，因?yàn)閕view組件的樣式有時(shí)候命名是一樣的，或者你第二次用到了這個(gè)組件，要求樣式不一樣，就要用好css選擇器了。第二種方案比較安全
到此這篇關(guān)于Vue修改iview組件的樣式的兩種方案(element同)的文章就介紹到這了,更多相關(guān)Vue修改iview樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3中使用scss加上scoped導(dǎo)致樣式失效問(wèn)題
這篇文章主要介紹了vue3中使用scss加上scoped導(dǎo)致樣式失效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例
今天小編就為大家分享一篇vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例
動(dòng)態(tài)路由,動(dòng)態(tài)即不是寫死的,是可變的,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作
這篇文章主要介紹了vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要為大家分享了一篇值得收藏的vuejs安裝教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色
這篇文章主要介紹了vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用el-upload實(shí)現(xiàn)文件上傳方式(包括預(yù)覽,下載)
該文章介紹了兩種文件上傳、預(yù)覽和下載的方法,分別是通過(guò)卡片形式和按鈕形式,卡片形式中的下載和預(yù)覽功能尚未完善,父組件使用了el-upload組件,可以實(shí)現(xiàn)新增、編輯和查看文件的功能2025-11-11
vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決
這篇文章主要介紹了vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了vant中的toast輕提示實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
在Vue模板中啟用這些表現(xiàn)力庫(kù)插件的最簡(jiǎn)單方法是在初始化項(xiàng)目時(shí)安裝它們,或使用 npm install（或 yarn add）安裝包,這篇文章主要介紹了Vue3中如何使用SCSS編寫樣式,需要的朋友可以參考下2023-12-12