效果图如下：
?
?html部分
<view
class="audiost"
:style='"width: 300px;height: "+heig+"px;background: #078AFD; position: fixed;top: 300px;left: 300px;"'
@tap="clickD($event)"
@mousedown="down"
@mousemove="mouse"
@mouseup="mouseupC"
@mouseleave="mouseLeaveF"
@mouseover="mouseOverF">
<view :style="'position: absolute;top: 0;left: 0;background: #EA892C;height: '+heig+'px;width:'+ wid +'px;'"></view>
</view>js部分：
data() {
return {
wid: 100,
heig: 4,
isdown: false,
}
},
methods: { // 方法 集合
clickD(e) {
console.log(e);
// console.log(e.currentTarget.firstElementChild);
this.wid = e.layerX;
// e.currentTarget.firstElementChild.style.width = e.layerX;
// console.log(e.currentTarget.firstElementChild[0].style.width)
},
down(e) {
this.isdown = true;
},
mouse(e) {
if (this.isdown) {
console.log(e);
console.log(e.layerX);
this.wid = e.layerX;
}
},
mouseupC(e) {
this.isdown = false;
},
mouseLeaveF(e) {
this.isdown = false;
},
mouseOverF(e) {
console.log(this);
console.log(e.path);
}
}css：
<style>
.audiost {
border-radius: 4px;
transition:all 0.1s linear; /**/
position: relative;
}
.audiost:before{ /*利用伪元素 定位的拉扯实现扩大鼠标接近元素范围*/
content: '';
position: absolute;
top: -10px;
right: 0;
bottom: -10px;
left: 0;
}
.audiost:hover {
transform-origin:center center;
/*放大倍数为1.1倍;*/
transform:scale(1,2)
}
</style>
