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)