DOM 工具程式 | Quasar 框架

DOM 工具

協助 Tree-Shake

您會注意到所有範例都匯入了 Quasar 的不同部分。但是，如果您只需要一個特定的 util 方法，則可以使用 ES6 解構來協助 Tree Shaking 僅嵌入該方法，而不是周圍的所有方法。

使用 dom 工具的範例

import { dom } from 'quasar'
const { offset } = dom

// Offset on screen
console.log(offset(DomElement))
// { top: 10, left: 100 }

您也可以匯入所有 dom 工具，並像這樣使用您需要的任何工具（但請注意，您的 bundle 也將包含未使用的的方法）

import { dom } from 'quasar'

// Offset on screen
console.log(dom.offset(DomElement))
// { top: 10, left: 100 }

提示

有關與 UMD 建置搭配使用的資訊，請參閱此處。

螢幕視窗上的偏移量

import { dom } from 'quasar'
const { offset } = dom

// Offset on screen
console.log(offset(DomElement))
// { top: 10, left: 100 }

取得計算樣式

這僅在 DomElement 可見時適用！它會傳回計算後的瀏覽器樣式，因此您要求的屬性不一定必須在 style 屬性中套用。

import { dom } from 'quasar'
const { style } = dom

// Get COMPUTED style (when DomElement is visible!)
// Computed means a DomElement might not have "height" CSS property set,
// but that does not mean it doesn't have a height when it's displayed.
// The following method accesses the computed CSS provided by the browser:
console.log(style(DomElement, 'height'))
// '10px' <<< notice it returns a String ending in 'px'

取得高度 / 寬度

import { dom } from 'quasar'
const { height, width } = dom


// Some aliases of the previous method for "width" and "height" which
// returns Numbers instead of Strings:
console.log(
  height(DomElement),
  width(DomElement)
)
// 10 100

批量套用 CSS 屬性

import { dom } from 'quasar'
const { css } = dom

// Apply a list of CSS properties to a DomNode
css(DomElement, {
  height: '10px',
  display: 'flex'
})

在 DOM 準備就緒時執行

import { dom } from 'quasar'
const { ready } = dom

// Execute a Function when DOM is ready:
ready(function () {
  // ....
})

處理 DOM 事件處理常式上的事件

它是跨瀏覽器的。

import { event } from 'quasar'

node.addEventListener('click', evt => {
  // left clicked?
  (Boolean) event.leftClick(evt)

  // middle clicked?
  (Boolean) event.middleClick(evt)

  // right clicked?
  (Boolean) event.rightClick(evt)

  // key in number format
  (Number) event.getEventKey(evt)

  // Mouse wheel distance (in pixels)
  (Object {x, y}) event.getMouseWheelDistance(evt)

  // position on viewport
  // works both for mouse and touch events!
  (Object {top, left}) event.position(evt)

  // get target DOM Element on which mouse or touch
  // event has fired upon
  (DOM Element) event.targetElement(evt)

  // call stopPropagation and preventDefault
  event.stopAndPrevent(evt)
})

發現錯誤？在瀏覽器中編輯此頁面

1. 簡介

1.1. 協助 Tree-Shake

2. 螢幕視窗上的偏移量

3. 取得計算樣式

4. 取得高度 / 寬度

5. 批量套用 CSS 屬性

6. 在 DOM 準備就緒時執行

7. 處理 DOM 事件處理常式上的事件