DOM实用程序

帮助Tree-Shake

你会注意到所有的例子都引入了Quasar的不同部分。 但是，如果您只需要一种特定的util方法，那么您可以使用ES6解构来帮助Tree Shaking仅嵌入该方法，而不是全部嵌入。

dom utils的例子：

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

// 屏幕上的偏移量
console.log(offset(DomElement))
// { top: 10, left: 100 }

你也可以导入所有的dom utils并使用你需要的任何东西（但是注意你的程序包也会包含未使用的方法）：

import { dom } from 'quasar'

// 屏幕上的偏移量
console.log(dom.offset(DomElement))
// { top: 10, left: 100 }

屏幕视区偏移

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

// 屏幕上的偏移量
console.log(offset(DomElement))
// { top: 10, left: 100 }

获得Computed风格

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

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

//获得COMPUTED风格（当DomElement可见时！）
//Computed意味着DomElement可能没有CSS属性集“height”，
//但这并不意味着它在显示时没有高度。
//以下方法访问由浏览器提供的计算的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

// 将一个CSS属性列表应用于DomNode
css(DomElement, {
  height: '10px',
  display: 'flex'
})

当DOM准备就绪时执行

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

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

获取跨浏览器CSS转换属性

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

let props = cssTransform('rotateX(30deg)')
// props = {
//   transform: 'rotateX(30deg)',
//   '-webkit-transform': 'rotateX(30deg)',
//   '-ms-transform': 'rotateX(30deg)',
//   '-o-transform': 'rotateX(30deg)',
//   '-moz-transform': 'rotateX(30deg)'
// }

// 然后你可以将它应用于css(el, props)
颜色实用程序 格式化实用程序