[TOC] ### Vue 常用 Dom 函数库 ***** #### 操作样式类 ~~~ /** * * 判断 dom 对象是否有className * @param el dom 元素 * @param className class 名称 * @returns {boolean} */ export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') return reg.test(el.className) } /** * 为一个 dom 元素添加一个class * @param el dom 元素 * @param className class 名称 */ export function addClass(el, className) { if (hasClass(el, className)) { return } let newClass = el.className.split(' ') newClass.push(className) el.className = newClass.join(' ') } ~~~ ***** #### 操作属性类 ~~~ /** * * @param el dom 元素 * @param name 属性名称 * @param val 属性值 * @returns {*} */ export function getData(el, name, val) { const prefix = 'data-' if (val) { return el.setAttribute(prefix + name, val) } return el.getAttribute(prefix + name) } ~~~ * [ ] 获取属性值 ~~~ onShortcutStart(e) { // 获取元素 data-index 值 let index = getData(e.target, 'index') } ~~~ ***** #### js css3 动画函数封装 ~~~ let elementStyle = document.createElement('div').style let vendor = (() => { let transformNames = { webkit: 'webkitTransform', Moz: 'MozTransform', O: 'OTransform', ms: 'msTransform', standard: 'transform' } for (let key in transformNames) { if (elementStyle[transformNames[key]] !== undefined) { return key } } return false })(); export function prefixStyle (style) { if (vendor === false) { return false } if (vendor === 'standard') { return style } return vendor + style.charAt(0).toUpperCase() + style.substr(1) } ~~~ * [ ] 使用： ~~~ import { prefixStyle } from 'common/js/dom' const transform = prefixStyle('transform') this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)` ~~~ >[danger] js 中在需要使用动画的地方定义常量，然后再使用