css/js 小技巧

js中动态添加的css属性，自动添加前缀，适配当前浏览器

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)
}

js中获取/设置指定元素的属性（height等）

//给该元素添加ref属性，通过引用来获取
this.imageHeight = this.$refs.bgImage.clientHeight
// <div ref="list"></div>
this.$refs.list.style.top = `${this.$refs.bgImage.clientHeight}px`;
// 如果dom不是html元素而是vue组件就不能直接使用ref来获取，而应该使用this.$ref.list.$el.style
// 如果使用属性名的变量的话就不好使用点来设置属性值：
let transform = 'webkitTransform'
this.$refs.bgImage.style[transform] = `scale(${scale})`

将元素的移到中间

父容器设置position为relative或者fix
子元素设置position为absolute， top

  .list {
    position: fixed;   // 父容器设置为relative护着fix
    .loading-wrapper{
      position: absolute;  //子容器设置为absolute
      width: 100%;
      top: 50%;    //  top为 50%
      transform: translateY(-50%);   // 然后在向上移动一半个自己的身位
    }
  }

js阻止冒泡和取消默认事件

• 组织冒泡：在事件后添加.stop

<i class="iconfont" :class="playIcon" @click.stop="togglePlaying"></i>

• 取消默认事件：事件后添加.prevent

  <div class="progress-btn-wrapper" ref="progressBtn"
    @touchstart.prevent="progressTouchStart"
    @touchmove.prevent="progressTouchMove"
    @touchend="progressTouchEnd"
  >
    <div class="progress-btn"></div>
  </div>