@braks/revue-draggable

让您的 Vue 组件可拖动 。 @ @ info

支持"Vue 2"和"Vue 3"!! 带QQ电池的来历包括组件/指令/可堆肥或 对于想要对拖曳事件进行更多控制的用户, wich 也可用 作为组件 / 指令 / 可替换.

依据 反应可拖动。 。 。 .

检查 备注 深入解释 页:1 德莫 🪄 以看到可拖动的Revue.

目录

• QQ 设置

  • 正在注册 Revue 可拖放

• QQ 快速启动

• 发展

• 测试

• 提案国

QQ 设置

$ npm i --save @braks/revue-draggable

# or
$ yarn add @braks/revue-draggable

# or
$ pnpm add @braks/revue-draggable

对于Vue2,在您的依赖(如果您使用Vue < 2.7)中添加成分-api.

$ yarn add @braks/revue-draggable @vue/composition-api

# or
$ npm i --save @braks/revue-draggable @vue/composition-api

使用组件

网络包装( Vue2)

// webpack.config.js

resolve: {
    alias: {
        vue: 'vue/dist/vue.js'
    }
}

坚果

// nuxt.config.ts
export default {
    alias: {
        vue: 'vue/dist/vue.js'
    }
}

++ 正在重新注册可拖放

// Vue3
import { createApp } from 'vue';
import Draggable, { DraggablePlugin, DraggableDirective } from '@braks/revue-draggable';

const app = createApp();

// Use as Plugin (registers directives and components)
app.use(DraggablePlugin);

// or
app.directive('draggable', DraggableDirective)
app.component('Draggable', Draggable);

app.mount('#root');

// Vue2 
import Vue from 'vue';
import { DraggablePlugin, DraggableDirective } from '@braks/revue-draggable';

// Use as Plugin
Vue.use(DraggablePlugin)

// or
Vue.directive('draggable', DraggableDirective)
Vue.component('Draggable', Draggable)

QQ 快速启动

使元素可拖动的最简单方法是使用 可拖动指令 它会为你处理一切 无需配置.

<div v-draggable="/* Pass DraggableProps as binding value here */" class="box">I use a directive to make myself draggable</div>

或用组件包装. (在Vue2中,确保只包括Vue3的全建,运行时间-建设工程. )

<Draggable>
  <div class="box">I use a wrapper</div>
</Draggable>

检查 示例文件 用于更多的细节示例,例如抛出元素,设定边界或同步状态.

发展

这个项目使用 维特 联合国 滚动 以创建分布.

# start (dev)
$ pnpm dev

# build app
$ pnpm build

# serve app from build
$ pnpm serve

# build dist
$ pnpm build:dist

调试

设置环境变量 DRAGGABLE_DEBUG 以启用拖动处理器上的日志.

测试

测试用Cypress完成. 您可以在 cypress 目录· ;

$ pnpm ci # starts test server and runs tests, make sure port 3000 is open