iview元件的改寫

2021-09-09 07:12:55 字數 873 閱讀 5745

(1)最近工作的時候常常遇到一些改變樣式的需求。但是有的元件是iview提供的,在多個地方使用,如果要在某處地方修改它的樣式,記得給css樣式加上權重,不然會影響其他位置的樣式。

比如修改table的高亮樣式,和每一行的hover事件的樣式:

#modifyelement .ivu-table-row-highlight td, .ivu-table-stripe .ivu-table-body tr.ivu-table-row-highlight:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-highlight:nth-child(2n) td, tr.ivu-table-row-highlight.ivu-table-row-hover td

#modifyelement tr.ivu-table-row-hover td

上述**我在前面加上了#modifyelement這個id,這個樣式只會在#modifyelement這個選擇器上生效,不會影響到全域性。

如果用的是scss之類的模組化css框架,那就更簡單了,在對應的父樣式之中寫入即可。

(2)iview元件中的日曆表datepicker的修改

iview封裝的日曆表元件十分難看,因為它的日曆的寬度總是比它上面的input要寬,而且不能進行自適應的改變。如果要使得它變為自適應的話,最好的方法找乙個參照的自適應的元素,在onsize事件中以等比例的方式設定它的寬度。

在vue中直接在mounted裡面寫**:

mounted())

}

changedatapickerstyle(),

iview中Cascader元件的坑

只認識這種結構的,所以拿到資料要處理下 必須是label value,有二級的是children v modal 要綁成 1,3 如果不使用change on select,1 是渲染不了的。on change有兩個預設值,但是我們想自己插值的話,這兩個預設值就沒了 比如 使用了v for迴圈要插入...

iView之Select元件的優化

我們公司的元件庫是基於iview比較早的版本修改後的僅供公司內部使用的元件庫,因此在使用的過程中就會遇到一些問題。接下來本文會對比select元件在效能上做出的優化。我們先來回顧一下debounce函式的使用場景 在前端頁面我們會遇到一些頻繁觸發的事件 比如 滑鼠的移動mousemove事件 win...

吐槽!iview的table元件

為什麼要吐槽iview的table元件呢?首先iview的table的使用體驗十分的不友好,每次修改資料都會重刷整個 效能極差,因為重刷 會導致自動失焦等問題!vue不是有diff演算法嗎?重刷 資料沒有發生變化部分是不會重新渲染的,效能為什麼會差呢?是的,diff演算法是可以優化vnode的渲染問...