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