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-box

Usage

Vue@2

demo-vue2

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

// for global
import { createApp } from 'vue';
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');

// or in setup script of vue3 component
import { GrabbingBox } from 'vue-grabbing-box/dist/vue3';

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|~~100~~ 50(from v0.1.3)|unit millisecond| |~~scrollSpeed~~|Number|~~3~~ 1(from 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)