如何優雅的只在當前頁面中覆蓋ui庫中元件的樣式

2021-10-24 14:05:08 字數 786 閱讀 5606

首先我們vue檔案的樣式都是寫在標籤中的,加scoped是為了使得樣式只在當前頁面有效。那麼問題來了,看圖:

我們正常寫的所有樣式,都會被加上[data-v-23d425f8]這個屬性(如1所示),但是第三方元件內部的標籤並沒有編譯為附帶[data-v-23d425f8]這個屬性。所以,我們想修改元件的樣式,就沒轍了。

怎麼辦呢,有些小夥伴給第三方元件寫個class,然後在乙個公共的css檔案中或者在當前頁面再寫乙個沒有socped屬性的style標籤,然後直接在裡面修改第三方元件的樣式。

這樣不失為乙個方法,但是存在全域性汙染和命名衝突的問題。約定特定的命名方式,可以避免命名衝突。但是還是不夠優雅。

可以這樣做:

.van-tabs /deep/ .van-ellipsis ;
這邊編譯後如下

這樣就不會給van-ellipsis也新增[data-v-23d425f8]屬性了。至此你可以愉快的修改第三方元件的樣式了。

當然了這裡的深度選擇器/deep/是因為我用的less語言,如果你沒有使用less/sass等,可以用>>>符號。

是否在當前頁面api

目前頁面可見性api有兩個屬性,乙個事件,如下 我寫了個如下的頁面可見性api支援性的測試 var ispagevisibilitysupport function return support 測試發現,如下瀏覽器都是支援的 不支援的瀏覽器 因此,typeof document.mshidden ...

怎樣統計使用者在當前頁面停留的時間

頁面停留時間 time on page 簡稱 tp,是 分析中很常見的乙個指標,用於反映使用者在某些頁面上停留時間的長短,傳統的tp統計方法會存在一定的統計盲區,比如無法監控單頁應用,沒有考慮使用者切換tab 最小化視窗等操作場景。基於上述背景,重新調研和實現了精確統計頁面停留時長的方案,需要 相容...

Vue如何動態重新整理當前頁面

1.場景 在處理列表時,常常有刪除一條資料或者新增資料之後需要重新重新整理當前頁面的需求。2.遇到的問題 1.用vue router重新路由到當前頁面,頁面是不進行重新整理的3.解決方法 provide inject 組合 作用 允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並在...