[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 中在需要使用動畫的地方定義常量，然后再使用