DOM 工具 | Quasar 框架

DOM 工具

帮助 Tree-Shake

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

使用 dom 工具的示例

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

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

您还可以导入所有 dom 工具并使用您需要的任何内容（但请注意，您的包也将包含未使用的 method）

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 事件处理程序上处理事件