uni-popup 实现可拖动

 

1、页面

点击head可以拖动弹框

<uni-popup type="bottom" :isMaskClick="false" :contentStyle="contentStyle">
<view class="show-popup">
<view class="uni-dialog-title" style="cursor: move;" @mousedown="onMouseDown">
<text class="uni-dialog-title-text">图表</text>
</view>

<view class="example-body">

弹框显示内容

</view>

<view class="uni-dialog-button-group">
<button @click="close()"  size="mini" type="warn">关闭</button>
</view>
</view>
</uni-popup>

data() {

return {

    startX: 0,
    startY: 0,
    offsetX: 0,
    offsetY: 0,
    isDragging: false,
    contentStyle: {
       left: 0,
       top: 0
     }

}

}

methods: {

onMouseDown(event) {
this.isDragging = true;
this.startX = event.clientX;
this.startY = event.clientY;
this.offsetX = this.contentStyle.left || 0;
this.offsetY = this.contentStyle.top || 0;
document.addEventListener("mousemove", this.onMouseMove);
document.addEventListener("mouseup", this.onMouseUp);
},
onMouseMove(event) {
if (this.isDragging) {
this.contentStyle.left = this.offsetX + event.clientX - this.startX;
this.contentStyle.top = this.offsetY + event.clientY - this.startY;
}
},
onMouseUp() {
if (this.isDragging) {
this.isDragging = false;
document.removeEventListener("mousemove", this.onMouseMove);
document.removeEventListener("mouseup", this.onMouseUp);
}
},

}

2、uni-popup.vue

contentStyle: {
type: Object,
default () {
return {
left: 0,
top: 0
};
}
},