vue對插件(iview,elementui,treeselect)樣式的局部修改方式

更新時(shí)間：2022年07月26日 14:05:51 作者：Lou_Lan

這篇文章主要介紹了vue對插件(iview,elementui,treeselect)樣式的局部修改方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

(iview,elementui,treeselect)樣式的局部修改

學(xué)習(xí)描述

在vue的使用過程中，我們知道插件的使用可以大大的提高我們的開發(fā)效率，這寫插件都是經(jīng)過很多人的驗(yàn)證和修改的，要比我們自己寫方便的很多。

但是在開發(fā)的過程中，有些插件一些在特定的頁面我們可能不要原來的樣式，需要進(jìn)行修改。然而我們在使用vue的過程中都會使用scope防止當(dāng)前頁面的樣式污染到其它的頁面，可是這樣也就導(dǎo)致了我們修改了插件的樣式無法起到作用。只有全局修改才能起到作用。

那么有沒有別的方式，既能修改插件的樣式而且有不會污染到全局的樣式呢？答案是：有的

具體方法

1> /deep/ 深層穿透

scoped能有效的方式樣式的全局污染，但是同時(shí)也是阻止了我們對第三方插件樣式的修改，使用/deep/樣式穿透既可以達(dá)到修改第三方插件樣式的效果，而且不會對全局造成污染。

? /deep/ .ivu-tooltip-light .ivu-tooltip-inner {
? ? background-color: #ecc9e2;
? ? color: #f30000;
? }

2> >>>

其實(shí)這個(gè)就是/deep/的另外一種寫法，只不過，可能有些sass,less之類的預(yù)處理無法正確的解析，所以最好是使用/deep/.

? >>> .ivu-tooltip-light .ivu-tooltip-inner {
? ? background-color: #ecc9e2;
? ? color: #f30000;
? }

注意：穿透方法實(shí)際上違反了scoped屬性的意義。而且在vue中過多使用scoped導(dǎo)致頁面打包文件體積增大。

vue+iview 樣式穿透-修改第三方插件樣式

修改第三方插件樣式

方法一：

在以前沒有用深度選擇器的時(shí)候，當(dāng)想修改第三方插件樣式時(shí)，通常做法都是在公共樣式表文件中，加一個(gè).zujian-parent-class .disanfang-class來修改。

例如我想修改iview單元格樣式：

common.styl文件中這樣寫

.first-table .ivu-table-cell
?? ?padding-left: 10px;

方法二：

和方法一差不多的還可以在組件內(nèi)寫一個(gè)無scoped的

<style lang="stylus">
/*此處寫覆蓋樣式*/
.first-table .ivu-table-cell
?? ?padding-left: 10px;
</style>

<style lang="stylus" scoped>
/*此處寫局部樣式*/
</style>

方法三：

用深度選擇器形成樣式穿透是一個(gè)更好的選擇，這樣不用擔(dān)心同名類造成樣式污染

page.vue組件中

<style lang="stylus" scoped>
? ? /*樣式穿透 可以使用/deep/ >>> ::v-deep?
? ? 具體使用哪個(gè)根據(jù)不同的語言、版本以及webpack版本（webpack2.X的一般不能用 >>>）有所不同 */
? ? .first-table ?/deep/ .ivu-table-cell {
? ? ? ? height: 37px;
? ? ? ? line-height:37px;
? ? }
</style>

官網(wǎng)鏈接

注意：/deep/ >>> ::v-deep 注意事項(xiàng)：

組件內(nèi)部類無法穿透成功。

例如下單菜單組件，最外層的.ivu-dropdown可以，但是其下一層.ivu-dropdown-rel是無法穿透的。

經(jīng)驗(yàn)證，以ivewui為例，組件最外層的類都是可以的，但是組件內(nèi)部的類通過第三種方法有些是無法生效的。其實(shí)這也是根據(jù)具體組件的加載先后決定的。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: