uni-app 桌面端实现可移动对话框或弹出窗

在uni-app中实现可移动的对话框或弹出窗，可以利用Vue的拖拽指令和组件来实现。以下是一个简单的代码示例，展示了如何在uni-app桌面端实现一个可拖动的对话框组件。

首先，创建一个自定义的拖动指令 v-draggable，用于处理拖动逻辑：

// directives/draggable.js
export default {
  bind(el, binding) {
    let isDragging = false;
    let startX, startY, initialX, initialY;

    const onMouseDown = (e) => {
      isDragging = true;
      startX = e.clientX;
      startY = e.clientY;
      initialX = el.offsetLeft;
      initialY = el.offsetTop;
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    };

    const onMouseMove = (e) => {
      if (!isDragging) return;
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      el.style.left = `${initialX + dx}px`;
      el.style.top = `${initialY + dy}px`;
    };

    const onMouseUp = () => {
      isDragging = false;
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };

    el.style.position = 'absolute';
    el.style.cursor = 'move';
    el.addEventListener('mousedown', onMouseDown);

    el._onMouseDown = onMouseDown;
  },
  unbind(el) {
    el.removeEventListener('mousedown', el._onMouseDown);
    delete el._onMouseDown;
  }
};

然后，在 main.js 中注册这个指令：

import Vue from 'vue';
import draggable from './directives/draggable';

Vue.directive('draggable', draggable);

接下来，创建一个对话框组件 DraggableDialog.vue：

<template>
  <div v-draggable class="draggable-dialog" :style="{ top: dialogTop + 'px', left: dialogLeft + 'px' }">
    <div class="dialog-content">
      <slot></slot>
    </div>
    <div class="drag-handle">🔀</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTop: 100,
      dialogLeft: 100
    };
  }
};
</script>

<style>
.draggable-dialog {
  border: 1px solid #ccc;
  padding: 10px;
  width: 300px;
  position: absolute;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.drag-handle {
  cursor: move;
  float: right;
}
</style>

在你的页面中引入并使用这个组件：

<template>
  <view>
    <DraggableDialog :dialogTop="dialogTop" :dialogLeft="dialogLeft">
      <text>这是一个可移动的对话框</text>
    </DraggableDialog>
  </view>
</template>

<script>
import DraggableDialog from '@/components/DraggableDialog.vue';

export default {
  components: { DraggableDialog },
  data() {
    return {
      dialogTop: 100,
      dialogLeft: 100
    };
  }
};
</script>

这样，你就可以在uni-app桌面端实现一个可移动的对话框了。这个示例中，对话框的位置通过 dialogTop 和 dialogLeft 控制，你可以根据需要进一步扩展功能，比如添加拖动边界检测等。