【Vue实战】手把手教你实现一个简单的 Vue3 可拖拽组件库

以下是一个基于 Vue3 的可拖拽组件库的代码：

首先创建一个 Vue3 项目：可以使用 Vue CLI 创建一个基于 Vue3 的项目。

1. 安装 draggable 库

npm install draggable

2. 创建可拖拽组件

<template>
  <div ref="draggable" :style="{ transform: `translate(${x}px, ${y}px)` }">
    <slot />
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import Draggable from 'draggable';

export default {
  name: 'Draggable',
  props: {
    x: { type: Number, default: 0 },
    y: { type: Number, default: 0 },
    disabled: { type: Boolean, default: false },
  },
  setup(props, { emit }) {
    const draggable = ref(null);

    watch(
      () => props.disabled,
      (disabled) => {
        if (disabled) {
          draggable.value?.destroy();
        } else {
          const { x, y } = props;
          draggable.value = new Draggable(draggable.value, {
            onDrag: (event) => {
              emit('update:x', x + event.deltaX);
              emit('update:y', y + event.deltaY);
            },
          });
        }
      },
      { immediate: true }
    );

    return { draggable };
  },
};
</script>

3. 封装为组件库

import Draggable from './Draggable.vue';

const install = (app) => {
  app.component(Draggable.name, Draggable);
};

export default { install };

4. 发布到 npm

在 package.json 中添加以下内容：

{
  "name": "my-draggable",
  "version": "1.0.0",
  "main": "dist/my-draggable.common.js",
  "module": "dist/my-draggable.esm.js",
  "files": ["dist"],
  "peerDependencies": {
    "vue": "^3.0.0"
  }
}

运行以下命令打包并发布到 npm：

npm run build
npm login
npm publish