快速修改antd?vue單個(gè)組件的默認(rèn)樣式

更新時(shí)間：2022年08月11日 11:25:26 作者：Unique·Blue

這篇文章主要介紹了快速修改antd?vue單個(gè)組件的默認(rèn)樣式方式，具有很好的參考價(jià)值，希望對大家有所幫助。

一、想要修改組件的默認(rèn)樣式

首先你需要知道組件是渲染在哪里的這個(gè)組件是渲染在當(dāng)前頁面內(nèi)部，還是脫離vue根節(jié)點(diǎn)單獨(dú)渲染？（根節(jié)點(diǎn)默認(rèn)id=“app”）

這個(gè)問題的答案很容易得到，打開文章頂部的antdv官方文檔，任意選中組件，F(xiàn)12打開調(diào)試，觀察Elements，例如：

1、不難看出，button是渲染在當(dāng)前頁面內(nèi)部的，包裹在"#app"的容器里。這樣的組件還有很多，比如input、radio等等。再看下面這張圖：

2、dropdown組件則是一部分渲染在#app內(nèi)，一部分渲染在"#app"的外面且與"#app"同級。這樣的組件也有很多，比如select、drawer等等

3、dropdown等，我們發(fā)現(xiàn)它們的共同點(diǎn)：這些組件都是“觸發(fā)型”組件，都是由用戶hover、click等手動激活后，進(jìn)行了動態(tài)渲染的

確定了這一點(diǎn)之后有什么用呢？

第二類組件，class類名設(shè)置的僅僅是#app內(nèi)部元素，而渲染在#app之外的那部分節(jié)點(diǎn)，需要單獨(dú)設(shè)置類名，比如 tooltip，我們設(shè)置overlayClassName="overlay-class"來測試：

我們發(fā)現(xiàn)類名已經(jīng)設(shè)置好了。這一條解決了沒有對應(yīng)到自己的父級類會造成的樣式不生效的問題

不同組件設(shè)置的屬性名稱不完全相同，使用時(shí)去查閱文檔就可以了

二、類名scoped的限制你是否會有這樣的疑惑

為什么有的需要設(shè)置 >>> 或者 /deep/ 來重寫深層樣式，有的卻不需要？

開發(fā)時(shí)，我們會根據(jù)需要設(shè)置每個(gè)頁面、組件css 的 scoped屬性，眾所周知，這個(gè)屬性是為了限制css只被當(dāng)前vue文件所使用，那它是如何實(shí)現(xiàn)這個(gè)限制的呢？

我們?nèi)我獯蜷_一個(gè)scoped的頁面，打開調(diào)試

我們可以發(fā)現(xiàn)，這個(gè)頁面的幾乎所有節(jié)點(diǎn)，都有了一個(gè)共同的“標(biāo)識”

我們在elements中打開對應(yīng)scoped的css文件，看下實(shí)際書寫和渲染出來的對應(yīng)關(guān)系：

.override {
  padding: 100px 100px 200px 100px;
}
/* 按鈕 */
.test-button {
  background: pink;
  border: 0;
}
.ant-btn-primary {
  background: #ccc;
  border: 0;
}
/* 面包屑 */
.container >>> .ant-breadcrumb-separator {
  margin: 10px;
}
.container /deep/ .ant-breadcrumb-separator {
  margin: 30px;
}

發(fā)現(xiàn)css也被編譯成了具有標(biāo)識的！重要的是，設(shè)置在/deep/ 和 >>> 后面的類，在編譯之后，是沒有這個(gè)標(biāo)識的！

發(fā)現(xiàn)了這一點(diǎn)之后，我們不需要去管是什么頁面，用的什么組件，只需要打開Elements面板，觀察你要寫的節(jié)點(diǎn)class，有沒有這個(gè)“標(biāo)識”。

如果有的話，正常寫css，類名就會被編譯成有“標(biāo)識”的；
如果沒有的話，需要設(shè)置在/deep/、>>>之后，編譯后就會拿掉這個(gè)標(biāo)識

三、使用/deep/、 >>>時(shí)

parentClass所在的節(jié)點(diǎn)是不帶“標(biāo)識”的怎么辦？

根據(jù)前面的總結(jié)，設(shè)置scoped后，此時(shí)的 parentClass 是被編譯成帶“標(biāo)識”的， sonClass是不帶“標(biāo)識”的。

.parentClass >>> .sonClass
.parentClass /deep/ .sonClass

那實(shí)際使用時(shí)，如果parentClass所在的節(jié)點(diǎn)本身是不帶 “標(biāo)識” 的怎么辦？

例如：

antd vue的組件，渲染在#app外部，已經(jīng)按照第一條給了自定義的類名wrapClassName，但是這個(gè)wrapClassName我們?nèi)匀粺o法使用，因?yàn)樗诘膁iv并沒有這個(gè)“標(biāo)識”（極少數(shù)情況會出現(xiàn)）

這時(shí)我們拿出了終極武器，

<div ref="wrap"> 
  <a-modal 
    v-model="visible" 
    title="Basic Modal" 
    @ok="handleOk" 
    class="test" 
    :getContainer="() => this.$refs.wrap"
   >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</div>

通過設(shè)置組件的 getContainer屬性（有的組件是 getPopupContainer ），我們將原本渲染在#app外部的節(jié)點(diǎn)，手動掛載到了#app內(nèi)部，之后再通過第二條的規(guī)則去設(shè)置就可以啦~

也可以不指定ref，直接設(shè)置 :getContainer="triggerNode => triggerNode.parentNode"默認(rèn)找到#app內(nèi)部的父節(jié)點(diǎn)

以上三點(diǎn)：

第一點(diǎn)解決了沒有父級類的問題（單獨(dú)通過屬性設(shè)置）
第二點(diǎn)解決了scoped造成的沒有對應(yīng)到父級類的問題（根據(jù)節(jié)點(diǎn)“標(biāo)識”情況使用 >>> 或 /deep/）
第三點(diǎn)解決了沒有父級類可以設(shè)置的問題（手動更改渲染規(guī)則）

前兩條操作的是類名樣式，第三條操作的是節(jié)點(diǎn)，小編覺得能通過前兩條解決的，盡量就不用第三條了（盲猜會影響性能吧）

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

您可能感興趣的文章: