DOM 工具 | Quasar 中文网

DOM 工具

帮助 Tree-Shake(Helping Tree-Shake)

¥Helping Tree-Shake

你会注意到所有示例都导入了 Quasar 的不同部分。但是，如果你只需要一个特定的实用方法，那么你可以使用 ES6 解构来帮助 Tree Shaking 仅嵌入该方法，而不是其周围的所有方法。

¥You will notice all examples import different parts of Quasar. However, if you need only one specific util method, then you can use ES6 destructuring to help Tree Shaking embed only that method and not all around it.

使用 dom 实用程序的示例：

¥Example with dom utils:

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

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

你还可以导入所有 dom 实用程序并使用所需的任何功能，如下所示（但请注意，你的软件包中也包含未使用的方法）：

¥You can also import all of dom utils and use whatever you need like this (but note that your bundle will contain unused methods too):

import { dom } from 'quasar'

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

提示

有关 UMD 构建的使用方法，请参阅此处。

¥For usage with the UMD build see here.

屏幕视口偏移(Offset on screen viewport)

¥Offset on screen viewport

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

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

获取计算样式(Get Computed Style)

¥Get Computed Style

这仅在 DomElement 可见时适用！它返回计算后的浏览器样式，因此你请求的属性不必在 style 属性中应用。

¥This applies only when DomElement is visible! It returns the computed browser style, so the property you are asking for doesn’t necessary has to be applied within a style attribute.

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'

获取高度/宽度(Get Height / Width)

¥Get Height / Width

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 属性(Apply CSS Properties in Batch)

¥Apply CSS Properties in Batch

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

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

DOM 就绪时执行(Execute when DOM is ready)

¥Execute when DOM is ready

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

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

处理 DOM 事件处理器上的事件(Handling event on a DOM event handler)

¥Handling event on a DOM event handler

跨浏览器。

¥It’s cross-browser.

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. Introduction

1.1. 帮助 Tree-Shake(Helping Tree-Shake)

2. 屏幕视口偏移(Offset on screen viewport)

3. 获取计算样式(Get Computed Style)

4. 获取高度/宽度(Get Height / Width)

5. 批量应用 CSS 属性(Apply CSS Properties in Batch)

6. DOM 就绪时执行(Execute when DOM is ready)

7. 处理 DOM 事件处理器上的事件(Handling event on a DOM event handler)