vue-grabbing-box

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

Events（from v0.1.7）

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)