Vue3实现一个拖拽加全屏功能的组件-EW帮帮网

Vue3 实现一个可拖拽和全屏的组件

在前端开发中，拖拽和全屏功能是非常常见的需求，比如弹窗、图片预览、视频播放器等场景。今天我们来用 Vue3 实现一个简单的组件，支持拖拽和全屏功能。

一、需求分析

我们要实现一个 Vue3 组件，具备以下功能：

可拖拽：用户可以通过鼠标拖动组件，改变组件的位置。
全屏功能：点击按钮可以让组件进入全屏模式，再次点击可以退出全屏。

二、实现步骤

1. 创建组件

在 src/components 文件夹下创建一个名为 DraggableFullscreen.vue 的组件。

<template>
  <div
    class="draggable-container"
    :style="containerStyle"
    @mousedown="startDrag"
  >
    <div class="header">
      <span>可拖拽和全屏组件</span>
      <button @click="toggleFullscreen">{{ isFullscreen ? '退出全屏' : '全屏' }}</button>
    </div>
    <div class="content">
      <p>这是一个可拖拽和全屏的组件。</p>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, watch, onMounted, onUnmounted } from 'vue';

export default {
  name: 'DraggableFullscreen',
  setup() {
    // 组件位置
    const position = reactive({
      x: 100, // 初始横坐标
      y: 100, // 初始纵坐标
    });

    // 是否全屏
    const isFullscreen = ref(false);

    // 拖拽相关变量
    let isDragging = false;
    let startX = 0;
    let startY = 0;

    // 开始拖拽
    const startDrag = (event) => {
      if (isFullscreen.value) return; // 全屏状态下禁止拖拽
      isDragging = true;
      startX = event.clientX - position.x;
      startY = event.clientY - position.y;

      document.addEventListener('mousemove', onDrag);
      document.addEventListener('mouseup', stopDrag);
    };

    // 拖拽中
    const onDrag = (event) => {
      if (!isDragging) return;
      position.x = event.clientX - startX;
      position.y = event.clientY - startY;
    };

    // 停止拖拽
    const stopDrag = () => {
      isDragging = false;
      document.removeEventListener('mousemove', onDrag);
      document.removeEventListener('mouseup', stopDrag);
    };

    // 切换全屏
    const toggleFullscreen = () => {
      isFullscreen.value = !isFullscreen.value;
    };

    // 计算容器样式
    const containerStyle = computed(() => {
      return {
        position: isFullscreen.value ? 'fixed' : 'absolute',
        top: isFullscreen.value ? '0' : `${position.y}px`,
        left: isFullscreen.value ? '0' : `${position.x}px`,
        width: isFullscreen.value ? '100vw' : '300px',
        height: isFullscreen.value ? '100vh' : '200px',
        zIndex: isFullscreen.value ? 9999 : 999,
        transition: 'all 0.3s ease', // 添加过渡效果
      };
    });

    // 监听全屏状态变化
    watch(isFullscreen, (newVal) => {
      console.log(`全屏状态: ${newVal ? '开启' : '关闭'}`);
    });

    // 清理事件监听器
    onUnmounted(() => {
      document.removeEventListener('mousemove', onDrag);
      document.removeEventListener('mouseup', stopDrag);
    });

    return {
      position,
      isFullscreen,
      startDrag,
      toggleFullscreen,
      containerStyle,
    };
  },
};
</script>

<style scoped>
.draggable-container {
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: move;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.content {
  padding: 10px;
}
</style>

2. 使用组件

在 src/App.vue 中引入并使用这个组件：

<template>
  <div>
    <h1>Vue3 可拖拽和全屏组件</h1>
    <DraggableFullscreen />
  </div>
</template>

<script>
import DraggableFullscreen from './components/DraggableFullscreen.vue';

export default {
  components: {
    DraggableFullscreen,
  },
};
</script>

三、功能解析

1. 拖拽功能

核心逻辑
- 在 mousedown 事件中记录鼠标初始位置和组件初始位置。
- 在 mousemove 事件中计算鼠标移动的距离，并更新组件的位置。
- 在 mouseup 事件中停止拖拽。
注意事项
- 全屏状态下禁止拖拽。

2. 全屏功能

核心逻辑
- 使用 isFullscreen 变量控制组件样式。
- 全屏时设置 position: fixed，并让组件占满整个屏幕。
- 非全屏时恢复 position: absolute，并使用 x 和 y 控制位置。

四、效果展示

运行项目后，你会看到一个可拖拽的组件，点击“全屏”按钮可以让组件进入全屏模式，再次点击可以退出全屏。

五、总结

文章实现了一个简单的 Vue3 组件，支持拖拽和全屏功能。这个组件的核心逻辑非常简单，主要依赖鼠标事件和样式的动态控制。可以根据自己的需求进一步扩展，比如：

添加动画效果，让全屏切换更流畅。
限制拖拽范围，防止组件拖出屏幕。

Vue3实现一个拖拽加全屏功能的组件