欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2024年04月22日 09:42:19   作者：漸暖°  
使用vue必然會(huì)用到等iview組件庫(kù),但是iview的組件的樣式跟自己寫(xiě)的div的樣式修改不太一樣,所以本文給大家介紹了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)文章

最新評(píng)論