Vue修改iview組件的樣式的兩種方案(element同)
使用vue必然會(huì)用到等iview組件庫(kù)，但是iview的組件的樣式跟自己寫(xiě)的div的樣式修改不太一樣
第一種方案
先引入一個(gè)iview按鈕
<Button>Default</Button>
F12，點(diǎn)開(kāi)開(kāi)發(fā)者人員工具，點(diǎn)擊選擇器，或者Ctrl+Shift+C
然后點(diǎn)擊剛才添加的Default按鈕，如下就是按鈕的不同情況的樣式
ivu-btn為主樣式
可以現(xiàn)在開(kāi)發(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)文章
vue中更改數(shù)組中屬性,在頁(yè)面中不生效的解決方法
今天小編就為大家分享一篇vue中更改數(shù)組中屬性,在頁(yè)面中不生效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
uniapp-ios開(kāi)發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)
在uni-app與Webview之間進(jìn)行數(shù)據(jù)交互是非常常見(jiàn)的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開(kāi)發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-07-07
一步一步學(xué)Vue，這篇文章為大家分享了第一篇前端主流框架vue學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
使用vue與jquery實(shí)時(shí)監(jiān)聽(tīng)用戶(hù)輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)?lái)的使用vue與jquery實(shí)時(shí)監(jiān)聽(tīng)用戶(hù)輸入狀態(tài)，實(shí)現(xiàn)效果是input未輸入值時(shí)，按鈕禁用狀態(tài)，具體操作代碼大家參考下本文吧2017-09-09
vue.js入門(mén)教程之綁定class和style樣式
小編之前介紹了通過(guò)vue.js計(jì)算屬性，不知道大家都學(xué)會(huì)了嗎。那這篇文章中我們將一起學(xué)習(xí)vue.js實(shí)現(xiàn)綁定class和style樣式，有需要的朋友們可以參考借鑒。2016-09-09
vue實(shí)現(xiàn)excel文件的導(dǎo)入和讀取完整步驟
Vue的數(shù)據(jù)綁定功能非常強(qiáng)大,很適合用來(lái)讀取Excel內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)excel文件的導(dǎo)入和讀取的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Element實(shí)現(xiàn)動(dòng)態(tài)增加多個(gè)輸入框并校驗(yàn)
本文主要介紹了Element實(shí)現(xiàn)動(dòng)態(tài)增加多個(gè)輸入框并校驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vite項(xiàng)目如何集成eslint和prettier