DOM 工具函数 | Quasar Framework

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 工具函数并随意使用（但这样，您的构建产物中也会包含没有用到的函数）：

import { dom } from "quasar";

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

TIP

有关 UMD 版本的用法，请看这里。

屏幕视口上的偏移量

import { dom } from "quasar";
const { offset } = dom;

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

获取计算后的样式

这仅在 DOM 元素可见时适用！它返回浏览器计算出的样式，所以您查询的属性不一定是通过 style 属性直接设置的。

import { dom } from "quasar";
const { style } = dom;

// 获取浏览器计算后的样式（当 DOM 元素可见时！）
// "计算后"意味着一个 DOM 元素可能没有设置 "height" CSS 属性，
// 但它在显示时仍然有一个高度。
// 下面的方法可以获取浏览器提供的计算后的 CSS：
console.log(style(DomElement, "height"));
// '10px' <<< 注意返回的字符串以 'px' 结尾

获取高度/宽度

import { dom } from "quasar";
const { height, width } = dom;

// 此函数是上面函数的别名封装，用于更方便地获取 "width" 和 "height"，
// 返回数字而不是字符串：
console.log(height(DomElement), width(DomElement));
// 10 100

批量应用 CSS 属性

import { dom } from "quasar";
const { css } = dom;

// 给 DOM 元素应用一组 CSS 属性：
css(DomElement, {
  height: "10px",
  display: "flex",
});

当 DOM 准备好时执行

import { dom } from "quasar";
const { ready } = dom;

// 当 DOM 准备好时执行一个函数：
ready(function () {
  // ....
});

处理 DOM 事件

跨浏览器兼容。

import { event } from 'quasar'

node.addEventListener('click', evt => {
  // 是否左键点击？
  (Boolean) event.leftClick(evt)

  // 是否中键点击？
  (Boolean) event.middleClick(evt)

  // 是否右键点击？
  (Boolean) event.rightClick(evt)

  // 数字格式的按键值
  (Number) event.getEventKey(evt)

  // 鼠标滚轮距离（像素）
  (Object {x, y}) event.getMouseWheelDistance(evt)

  // 视口上的位置
  // 同时支持鼠标事件和触摸事件！
  (Object {top, left}) event.position(evt)

  // 获取鼠标或触摸事件触发时所在的目标 DOM 元素
  (DOM Element) event.targetElement(evt)

  // 调用 stopPropagation 和 preventDefault
  event.stopAndPrevent(evt)
})

发现错误？在浏览器中编辑此页

1. Introduction

1.1. 帮助 Tree-Shake（树摇）

2. 屏幕视口上的偏移量

3. 获取计算后的样式

4. 获取高度/宽度

5. 批量应用 CSS 属性

6. 当 DOM 准备好时执行

7. 处理 DOM 事件