vue-grabbing-box
vue3 support from
^1.0.0
Introdution
This is a container component (Vue component) similar to a canvas box, which displays your content (whether it is an image or any Vue component), and supports features such as:
-
Mobile
- Single finger canvas drag and drop
- Double finger scaling (zoom-in zoom-out)
- You can also expand, shrink, and reset by clicking the button
-
PC
- Click and hold to drag
- Scroll wheel up and down to drag up and down
- Scale by 'Ctrl'+'Wheel'
- You can also zoom-in, zoom-out, and reset by clicking the button
Try it out:
demo-vue2
demo-vue3
Changelog
read changelog
Install
pnpm add vue-grabbing-box
# or
npm install vue-grabbing-box
# or
yarn add vue-grabbing-boxUsage
Vue@2
import Vue from 'vue';
import GrabbingBox from 'vue-grabbing-box'; // import as vue2 for default
// or
import GrabbingBox from 'vue-grabbing-box/dist/vue2'; // specify vue2
// recommend, in case of changing default export to vue3
import 'vue-grabbing-box/dist/vue2/index.css'; // from v0.1.0 need to import css file
Vue.use(GrabbingBox);
// or import component directly
import { GrabbingBox } from 'vue-grabbing-box/dist/vue2';
import 'vue-grabbing-box/dist/vue2/index.css';
Vue.use(GrabbingBox);
// or
Vue.component(GrabbingBox.name, GrabbingBox);<template>
<grabbing-box>
<!-- here lays your content -->
</grabbing-box>
</template>Note: used ElButton in scale button-group
(No more using ElButton from v0.1.0)
Vue@3
import { createApp } from 'vue';
import GrabbingBox from 'vue-grabbing-box/dist/vue3';
// or
import { GrabbingBox } from 'vue-grabbing-box/dist/vue3';
import 'vue-grabbing-box/dist/vue3/index.css';
const app = createApp();
app.use(GrabbingBox);
app.mount('#app');API
Attributes
| Property | Type | Default Value | Note |
|---|---|---|---|
| maxScale | Number | 200 | max limitation, unit percent |
| minScale | Number | 20 | min limitation, unit percent |
| scaleStep | Number | 10 | unit percent |
| initScale | Number | 100 | unit percent, v1.0.0-alpha.4~ |
| scaleButtons | Boolean | true | whether show scale button-group，includes + - and reset
|
| scaleButtonsPosition | String | top right |
v0.1.1 specify the position of scale button-group, top | right | bottom | left
|
| scaleButtonsSpaceX | String | 10px |
v0.1.1 specify the horizontal space to edge |
| scaleButtonsSpaceY | String | 20px |
v0.1.1 specify the vertical space to edge |
| throttleSpan | Number |
v0.1.3) |
unit millisecond |
| Number |
v0.1.3) |
deprecated from v0.1.7 v0.0.6 mouse scroll speed，value range 1~6
|
|
| emitClickOnDrag | Boolean | false |
v0.1.4 emit click event even if have dragged (just in case of special usage case, usually could ignore this prop #7 no-emit-click) |
Events（from v0.1.7）
| Event Name | Description | Params |
|---|---|---|
| update | on view change | { scale, translateX, translateY } |
| zoom-in | on zoom in | { scale, translateX, translateY } |
| zoom-out | on zoom out | { scale, translateX, translateY } |
| move | on drag the cavas, or mouse scroll, or touch pad scroll | { scale, translateX, translateY } |
| reset | on reset the view | - |
Develop
# start demo projects(vue2 & vue3)
pnpm dev
# or start demo projects under 'expamples' folder separately
# Note that the GrabbingBox used is from NPM or local files(source files or build result)