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
};
}
},
