[技術博客]iview組件樣式踩坑記錄
在本次項目開發中，前端項目主要使用vue框架+iview組件構建，其中iview組件在使用過程中遇到了許多官方文檔中沒有明確說明或是很難注意到的小坑，這里總結一下分享給大家。
一、iview組件的特殊使用
各個組件的基本用法在官方文檔中已經給出，這里總結一些官方文檔並沒有仔細說明的組件的特殊用法。
1.部分可以動態展開的組件（如下拉菜單）在展開時，被頁面中其他元素遮擋問題。
解決方法：使用transfer屬性（僅對iview組件有效）
<Dropdown transfer>
</Dropdown>
我遇到這個問題時，最初的想法是在組件的樣式中添加z-index:8888來設置該組件的堆疊順序，令其顯示在最上方。但是這種方法對於某些iview組件並不起作用，具體原因可能是iview組件本身對z-index有一套動態設置的方法，而且如導航菜單欄之類的大組件中也用到了許多小組件，手動設置的z-index無法被繼承。
其實，iview組件本身提供了一個名為transfer的屬性，當在組件的tag中添加該屬性時，iview會改變transfer元素的位置，將其直接放置於<body>tag下，並且動態設置z-index保證其處於最上層，不會被其他元素遮擋。不是很明白為什么官方文檔不提示transfer屬性的使用 😦。
效果如下圖所示，加入transfer屬性的下拉框從里層的<div>被提到了<body>層，並且z-index的數值會隨着點擊不斷增加，感興趣的朋友可以自己嘗試感受一下z-index的動態變化。
2.導航菜單欄組件選中元素的動態控制。
解決方法：配合vue框架，動態改變導航菜單欄active-name屬性變量為想要選中的項的name。
<Menu :active-name="mySiderActive">
<MenuItem name="1-1">
</MenuItem>
<MenuItem name="2-1">
</MenuItem>
</Menu>
在需要改變選中項的事件中添加對變量的修改，即可改變選中項
this.mySiderActive = "2-1";
3.對話框組件不顯示頁腳內容。
解決方法：將footer-hide屬性設置為true
<Modal
v-model="modal1"
title="hello"
:footer-hide=true
>
</Modal>
在某些場景下，我們不想讓對話框的頁腳顯示，而iview組件官方文檔中只提供了改寫頁腳的方法，並沒有說明如何隱藏。使用該方法貌似也可以對iview其他組件的一些部分進行隱藏，未嘗試。
二、iview組件的樣式修改
iview組件的樣式修改可謂一路踩坑，接下來總結一下可以對樣式進行修改的方法。
1.直接在具體的組件對象上添加style。
以導航菜單的<MenuItem>元素為例：
<MenuItem name="10" style="pointer-events:none;" >
</MenuItem>
直接在該對象上設置style樣式貌似是優先級最高的方式樣式加載方式，使用該方法可以將某一對象原本的iview默認樣式完美覆蓋，如果需要改動的對象比較少，此方法簡單有效。但如果要將許多iview組件對象修改為某一相同樣式，特別是還需要動態變化時，該方法就顯得十分笨拙冗長。
2.全局修改某一類iview組件的樣式。
-
首先，我們需要知道待修改樣式的類名。
打開瀏覽器元素審查（以chrome為例），在這里我們可以選中相應的tag，看到html代碼與頁面中元素的對應關系，同時右側將顯示該元素正在應用的css樣式。
右側樣式框中使用我們可以看到一長串的類名，值得對前端新手（比如我）強調的是，並不只有最后一個
.xxxxx，使用逗號分隔的這一長串帶有點和空格的東西都是css樣式的類名。比如在上圖紅框中出現的css的類是.ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu和.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item這兩個類，而不是.ivu-menu-submenu和.ivu-menu-item。而且類名中的空格也很有講究，不可以隨便增刪。樣式框中使用黑色強調的類是我們選中元素正在應用的css類，而灰色的類名則是其他使用相同樣式的類，並不是該元素正在應用的類，因此我們只需要修改深黑色類名對應的樣式，即可實現對選中元素樣式的覆蓋。
-
接着，全局樣式的修改方式是直接添加style標簽，更改相應的css類的樣式，比如：
<style> .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu { color: #2d8cf0; } </style>此時，我們就會發現頁面中所有應用
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu的樣式被修改為我們想要的效果。 -
最后，也許我們想知道該元素在某些事件（比如hover、active等）下iview的樣式，chrome為我們提供了非常貼心的功能，右鍵點擊某元素可以選擇該元素所處狀態，成功選擇后，右側樣式框內即出現相應的樣式顯示，使用相同的方法覆蓋即可。
3.局部修改某一類iview組件的樣式。
有時候我們並不想把整個頁面的某一組件都渲染成一樣的樣式，僅僅想針對某一部分的樣式進行修改，這個時候就需要局部修改樣式。在局部修改時，我們特別需要注意父層樣式的優先級高於子層樣式，如果我們在父層中覆蓋了iview組件的樣式，那么子層中就算再覆蓋該類樣式，也不會產生作用。
通過深度作用選擇器對某一vue組件中的樣式進行修改
根據我的理解，如果在當前組件component1的中對引用的其他組件componentn，賦予css類名，如下所示，將vue組件MenuBar和ControlPanel的css類名分別設置為mymenu和ControlPanel
<template>
<Layout>
<MenuBar class="mymenu"></MenuBar>
<ControlPanel class="mycontrol"></ControlPanel>
</Layout>
</template>
接着，我們在當前組件源碼的style標簽中加入scoped屬性，並在其中通過深度作用選擇器，實現對單獨的vue組件中iview樣式的修改。比如，我們想要修改ControlPanel組件中的.ivu-menu-dark.ivu-menu類的樣式，我們可以在組件中通過以下方式修改：
<style scoped>
.mycontrol >>> .ivu-menu-dark.ivu-menu {
background: #3f3f3f;
}
</style>
三、vue實現頁面的自定義樣式主題切換
在vue中實現頁面的主題切換，實際上就是動態改變頁面中元素的樣式，同樣分為單獨和全局兩種方式。
單獨動態修改某一對象的樣式
在該對象的tag中將vue變量綁定至style，寫法如下：
<MenuItem name="1" :style="{'height':itemHeight, 'pointer-events':'none'}"></MenuItem>
此時，在腳本中控制itemHeight變量的值即可實現對該對象樣式中height屬性的修改。
動態修改當前模塊css樣式
在該模塊的tag標簽中將vue變量綁定為class，如下所示：
<Layout :class="controlTheme">
...
...
</Layout>
然后在當前vue組件源碼中提前寫好多種主題的css樣式：
<style scoped>
.darkcontrol >>> .ivu-btn {
border-radius: 0px;
color: #f5f7f9;
background-color: #464e57;
border-color: #464e57;
margin: 0px;
border: 0px solid transparent;
padding: 6px 16px 6px;
margin: -3px;
}
.lightcontrol >>> .ivu-btn {
border-radius: 0px;
color: #4b4b4d;
background-color: #dddddd;
border-color: #bbbbbb;
margin: 0px;
border: 0px solid transparent;
padding: 6px 16px 6px;
margin: -3px;
}
...
...
...
</style>
此時通過腳本動態控制變量controlTheme的值為主題類名，如darkcontrol或lightcontrol，即可實現對該類中css樣式的動態切換。
在局部組件動態修改整個頁面樣式
之前我們說過添加transfer屬性后的iview組件，在最終渲染時會直接被放到頁面的<body>層，這樣的話無法使用第二種修改當前模塊的css樣式的方法來動態改變其樣式，我們需要使用一種在局部組件修改整個<body>樣式的方法。具體方法如下：
在vue生命周期的beforeCreate階段，動態為頁面的最上層<body>綁定類名，如下：
beforeCreate: function() {
document.getElementsByTagName("body")[0].className = "myLightDrop";
}
並在當前vue組件源碼下修改該類的全局樣式：
<style>
.myLightDrop .ivu-select-dropdown {
overflow: hidden;
max-height: 1000px;
color: #66ccff;
}
.myLightDrop .ivu-select-dropdown {
overflow: hidden;
max-height: 1000px;
color: #888888;
}
...
...
...
<style>
當發生切換主題的事件時，為<body>再綁定其他寫好的樣式的類名：
changeTheme(status) {
document.getElementsByTagName("body")[0].className = status;
}
最后別忘了，在生命周期 beforeDestroy階段去掉用於主題切換的額外綁定的類名：
beforeDestroy() {
document.body.removeAttribute("class", this.myDropTheme);
}