一个Vue组件,可创建可移动,可拖动,可调整大小,可扩展,可旋转,可变形,可插入的元素↔️ ↕️ 🔄
一个Vue组件,可创建可移动,可拖动,可调整大小,可扩展,可旋转,可变形,可插入的元素↔️ ↕️ 🔄
JavaScript CSS相关
共681Star
详细介绍
Vue Moveable
A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.
Moveable | |||
---|---|---|---|
Draggable | Resizable | Scalable | Rotatable |
![]() |
![]() |
![]() |
![]() |
Warpable | Pinchable | ||
![]() |
![]() |
🔥
Able!
- Draggable refers to the ability to drag and move targets.
- Resizable indicates whether the target's width and height can be increased or decreased.
- Scalable indicates whether the target's x and y can be scale of transform.
- Rotatable indicates whether the target can be rotated.
- Warpable indicates whether the target can be warped(distorted, bented).
- Pinchable indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.
⚙️
Installation
$ npm i vue-moveable
📄
Documents
🚀
How to use
<template>
<Moveable
class="moveable"
v-bind="moveable"
@drag="handleDrag"
@resize="handleResize"
@scale="handleScale"
@rotate="handleRotate"
@warp="handleWarp"
@pinch="handlePinch"
>
<span>Vue Moveable</span>
</Moveable>
</template>
<script>
import Moveable from 'vue-moveable';
export default {
name: 'app',
components: {
Moveable,
},
data: () => ({
moveable: {
draggable: true,
throttleDrag: 0,
resizable: false,
throttleResize: 1,
keepRatio: true,
scalable: true,
throttleScale: 0,
rotatable: true,
throttleRotate: 0,
pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
}
}),
methods: {
handleDrag({ target, left, top }) {
console.log('onDrag left, top', left, top);
target.style.left = `${left}px`;
target.style.top = `${top}px`;
},
handleResize({
target, width, height, delta,
}) {
console.log('onResize', width, height);
delta[0] && (target.style.width = `${width}px`);
delta[1] && (target.style.height = `${height}px`);
},
handleScale({ target, transform, scale }) {
console.log('onScale scale', scale);
target.style.transform = transform;
},
handleRotate({ target, dist, transform }) {
console.log('onRotate', dist);
target.style.transform = transform;
},
handleWarp({ target, transform }) {
console.log('onWarp', target);
target.style.transform = transform;
},
handlePinch({ target }) {
console.log('onPinch', target);
},
}
}
</script>
⚙️
Developments
npm run serve
Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
⭐️
Show Your Support
Please give a
👏
Contributing
If you have any questions or requests or want to contribute to vue-moveable
or other packages, please write the issue or give me a Pull Request freely.
🐞
Bug Report
If you find a bug, please report to us opening a new Issue on GitHub.
📝
License
This project is MIT licensed.