vue-grabbing-box v1.0.0-alpha.4

vue-grabbing-box

English

^1.0.0 起增加 vue3 版本支持

介绍

这是一个类似画布盒子的容器组件（vue 组件），将你的内容（无论是图片还是任何 vue 组件）展示出来，并提供：

• 移动端
  • 单指实现画布拖拽
  • 双指实现扩缩放
  • 另可通过点击按钮实现扩大缩小及重置
• PC端
  • 单击按住拖动
  • 滚动轮上下滚动 == 上下拖动
  • Ctrl+Wheel的扩缩放
  • 另可通过点击按钮实现扩大缩小及重置

直观上图：

试一下：
demo-vue2
demo-vue3

更新记录

changelog

使用

Vue@2

demo-vue2

pnpm add vue-grabbing-box
# or
npm install vue-grabbing-box
# or
yarn add vue-grabbing-box

import Vue from 'vue';
import GrabbingBox from 'vue-grabbing-box'; // 直接引入默认 vue2
// 或
import GrabbingBox from 'vue-grabbing-box/dist/vue2'; // 指定 vue2（推荐）
// v0.1.0起，不再将css一并打包进js文件，需要单独引入样式
import 'vue-grabbing-box/dist/vue2/index.css';

Vue.use(GrabbingBox);

// 组件级安装（局部安装）也是支持的，只是就一个组件而已，又不是组件库，就没必要了
// 而且组件单独安装必需要单独引入样式
import GrabbingBox from 'vue-grabbing-box/packages/vue2/src/grabbing-box';
import 'vue-grabbing-box/dist/vue2/index.css';
Vue.use(GrabbingBox);
// 或
Vue.component(GrabbingBox.name, GrabbingBox);

<template>
  <grabbing-box>
    <!-- 这里是内容区域，放你自己的内容 -->
  </grabbing-box>
</template>

注：scale 按钮组中使用了 ElButton
v0.1.0起不再依赖 ElementUI 的 ElButton 组件

Vue@3

import { createApp } from 'vue';
import GrabbingBox from 'vue-grabbing-box/dist/vue3';
// 或
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

属性参数

事件（from v0.1.7）

开发

# 启动 demo 项目进行开发
pnpm dev

# 也可以进入 excamples 下的 vue2、vue3 项目单个启动
# 注意项目中对 GrabbingBox 的引入，是本地原文件或者编译后文件，还是线上 NPM 包