prefixStyle()函数使用

最近在做vue 项目音乐webApp时 遇到需要操作css3的一些属性，当然为了浏览器的兼容性，有时我们需要加上一些前缀。

如果是在css中，编辑器自带的功能一般可以实现，或者通过gulp、webpack打包时也都有插件实现自动添加

如果是在js中，可以用下面的代码：封装成一个prefixStyle()函数复用

//dom.js文件
let elementStyle = document.createElement('div').style

function vendor(prop) {
    let ucProp = prop.charAt(0).toUpperCase() + prop.substr(1)
    let transformNames = {
        webkit: `webkit${ucProp}`,
        Moz: `Moz${ucProp}`,
        O: `O${ucProp}`,
        ms: `ms${ucProp}`,
        standard: prop
    }

    for (let key in transformNames) {
        if (elementStyle[transformNames[key]] !== undefined) {
          return key
        }
    }

    return false
}

export function prefixStyle(style) {
    const ret = vendor(style)
    if (ret === false) {
      return false
    }

    if (ret === 'standard') {
      return style
    }

    return ret + style.charAt(0).toUpperCase() + style.substr(1)
}
然后，在页面中调用，如下：

import {prefixStyle} from 'common/js/dom.js'

const transform = prefixStyle('transform')
const transition = prefixStyle('transition')
const backdrop = prefixStyle('backdrop-filter')
 //这里的 dom 根据实际情况替换成DOM节点

 this.$refs.dom1.style[transform] = 'translate3d(0, 0, 0)' 
 this.$refs.dom2.style[transform] = `translate3d(0,${translateY}px,0)`

 this.$refs.dom3.style[backdrop] = `blur(${blur}px)`

总之减少代码的冗余度，提高代码的复用性是我们偷懒的必经之道