快捷導(dǎo)航

Vue修改iview組件的樣式的兩種方案(element同)

更新時(shí)間：2024年04月22日 09:42:19 作者：漸暖°

使用vue必然會(huì)用到等iview組件庫,但是iview的組件的樣式跟自己寫的div的樣式修改不太一樣,所以本文給大家介紹了Vue修改iview組件的樣式的兩種方案(element同),需要的朋友可以參考下

第一種方案

先引入一個(gè)iview按鈕

<Button>Default</Button>

在這里插入圖片描述

F12，點(diǎn)開開發(fā)者人員工具，點(diǎn)擊選擇器，或者Ctrl+Shift+C

在這里插入圖片描述

然后點(diǎn)擊剛才添加的Default按鈕，如下就是按鈕的不同情況的樣式

在這里插入圖片描述

ivu-btn為主樣式

在這里插入圖片描述

可以現(xiàn)在開發(fā)者工具中調(diào)試好你想要的樣式

然后在該頁面的.vue文件中修改樣式

//必須是style標(biāo)簽才能修改,<style scoped>無法修改view組件的樣式
<style>
.ivu-btn { 
    font-size: 112px;
}
</style>

效果如下

在這里插入圖片描述

第二種方案 /deep/

采用deep，不過時(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ù)組中屬性,在頁面中不生效的解決方法
今天小編就為大家分享一篇vue中更改數(shù)組中屬性,在頁面中不生效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)
在uni-app與Webview之間進(jìn)行數(shù)據(jù)交互是非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
2024-07-07
前端主流框架vue學(xué)習(xí)筆記第一篇
一步一步學(xué)Vue，這篇文章為大家分享了第一篇前端主流框架vue學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
使用vue與jquery實(shí)時(shí)監(jiān)聽用戶輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)淼氖褂胿ue與jquery實(shí)時(shí)監(jiān)聽用戶輸入狀態(tài)，實(shí)現(xiàn)效果是input未輸入值時(shí)，按鈕禁用狀態(tài)，具體操作代碼大家參考下本文吧
2017-09-09
vue.js入門教程之綁定class和style樣式
小編之前介紹了通過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)大,很適合用來讀取Excel內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)excel文件的導(dǎo)入和讀取的相關(guān)資料,文中通過代碼示例介紹的非常詳細(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)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
這篇文章主要給大家總結(jié)介紹了關(guān)于vue中八種組件通信方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08