分享一款前端组件画布容器组件: vue-grabbing-box
加个关注，别迷路，一起向前嗷嗷冲！😁
背景
在移动端和PC端，用户通常期望能够以直观的方式操作和浏览大尺寸的内容，比如图片或其他Vue组件。为了提供更好的用户体验，我们需要一个灵活且易于使用的组件，以实现在移动端和PC端的拖拽、缩放等功能。这就是 vue-grabbing-box 组件的开发动机。
Github 地址: www.npmjs.com/package/vue…
✨求Star 求分享 ღ( ´･ᴗ･` )比心✨
组件功能描述：
vue-grabbing-box 是一个灵活的容器组件，它能够展示各种内容，无论是图片还是其他Vue组件，并为用户提供了多种交互方式以满足移动端和PC端的需求。
同时 支持 vue2、vue3。
移动端功能：
- 单指拖拽： 用户可以通过单指在画布上滑动，实现内容的拖拽。
- 双指缩放： 通过双指捏合或展开的手势，用户可以对内容进行缩放操作。
- 按钮操作： 提供按钮，用户可以通过点击按钮实现扩大、缩小及重置功能。
PC端功能：
- 单击拖拽： 用户可以通过在画布上单击并拖动鼠标，实现内容的拖拽。
- 滚动轮操作： 鼠标滚动轮的上下滚动效果相当于上下拖动画布。
- Ctrl + 滚动轮缩放： 按住Ctrl键的同时使用鼠标滚动轮，实现内容的缩放。
- 按钮操作： 同样提供按钮，用户可以通过点击按钮实现扩大、缩小及重置功能。
vue-grabbing-box 的目标是提供一致而直观的用户体验，使用户能够以他们习惯的方式在不同设备上操作和浏览内容。
vue2 使用说明
demo地址: github.com/CoderMonkie…
安装
pnpm add vue-grabbing-box
# or
npm install vue-grabbing-box
# or
yarn add vue-grabbing-box
引入插件
// main.js
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>
vue3 使用说明
demo 地址: github.com/CoderMonkie…
// main.js
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参数说明
属性参数
| 属性名 | 类型 | 默认值 | 说明 | |||
|---|---|---|---|---|---|---|
| maxScale | Number | 200 | 放大最高比例限制，单位百分比 | |||
| minScale | Number | 20 | 缩小的最小比例限制，单位百分比 | |||
| scaleStep | Number | 10 | 放大缩小的步长，点击按钮时用，单位同上 | |||
| initScale | Number | 100 | 初始化时的显示比例，v1.0.0-alpha.4~ | |||
| scaleButtons | Boolean | true | 是否显示 scale 按钮组，包括放大（+）缩小（-）和重置 | |||
| scaleButtonsPosition | String | top right | v0.1.1 指定缩放按钮组的位置, `top | right | bottom | left` |
| scaleButtonsSpaceX | String | 10px | v0.1.1 指定与边的横向距离 | |||
| scaleButtonsSpaceY | String | 20px | v0.1.1 指定与边的纵向距离 | |||
| throttleSpan | Number | v0.1.3) | 事件节流时间间隔，单位毫秒 | |||
| Number | v0.1.3) | deprecated from v0.1.7 v0.0.6 PC端鼠标滚动轮上下滚动倍速，可设范围1~6 | ||||
| emitClickOnDrag | Boolean | false | v0.1.4 拖拽后仍触发点击事件 (只是为了预防有特殊需要, 通常可以忽略这个参数 #7 屏蔽 click) |
事件（from v0.1.7）
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| update | 任何显示效果的变化都会触发（包括放大缩小拖拽和重置） | { scale, translateX, translateY } |
| zoom-in | 放大显示效果的时候触发 | { scale, translateX, translateY } |
| zoom-out | 缩小显示效果的时候触发 | { scale, translateX, translateY } |
| move | 改变横向或竖向位置的时候触发，也就是拖拽或者滚动轮滚动或者触摸板滚动 | Object |
| reset | 重置时触发 | - |
