在Vue Element組件庫中,使用rem單位的方法非常常見。Rem是一種相對單位,和像素單位不同,Rem大小是相對于html根元素來計算的。
在Vue Element中,有一個非常方便的方法可以設置Rem大小。它被稱為ElSizeMixin。使用這個Mixin,我們可以很容易地計算Rem大小,而不必手動計算。以下是它的代碼實現:
ElSizeMixin: { mounted: function () { this.$nextTick(function () { this.$el.style.fontSize = 100 * document.documentElement.clientWidth / 1920 + 'px' }) window.addEventListener('resize', this.handleResize) }, destroyed: function () { window.removeEventListener('resize', this.handleResize) }, methods: { handleResize: function () { this.$el.style.fontSize = 100 * document.documentElement.clientWidth / 1920 + 'px' } } }
這里,我們將100作為基本的根字體大小。然后,我們使用document.documentElement.clientWidth來獲取屏幕的寬度,并除以1920,得到屏幕相對于基準字號的比例。最后,我們將該比例乘以100,得到一個字號大小,將它應用于html元素的font-size屬性上。
上面的代碼還包括了一個resize事件處理器,當窗口大小變化時,會重新計算字體大小。這是很重要的,因為用戶可能會調整屏幕大小。
這就是使用Vue Element的ElSizeMixin來設置rem單位大小的方法。它有利于我們簡化代碼,并且始終保持適當的根字號大小,而不需要手動計算。