分享一款前端组件画布容器组件: vue-grabbing-box

分享一款前端组件画布容器组件: vue-grabbing-box

背景

在移动端和PC端，用户通常期望能够以直观的方式操作和浏览大尺寸的内容，比如图片或其他Vue组件。为了提供更好的用户体验，我们需要一个灵活且易于使用的组件，以实现在移动端和PC端的拖拽、缩放等功能。这就是 vue-grabbing-box 组件的开发动机。

Github 地址: www.npmjs.com/package/vue...

✨求Star 求分享 ღ( ´･ᴗ･` )比心✨

组件功能描述：

vue-grabbing-box 是一个灵活的容器组件，它能够展示各种内容，无论是图片还是其他Vue组件，并为用户提供了多种交互方式以满足移动端和PC端的需求。

同时 支持 vue2、vue3。

移动端功能：

1. 单指拖拽： 用户可以通过单指在画布上滑动，实现内容的拖拽。
2. 双指缩放： 通过双指捏合或展开的手势，用户可以对内容进行缩放操作。
3. 按钮操作： 提供按钮，用户可以通过点击按钮实现扩大、缩小及重置功能。

PC端功能：

1. 单击拖拽： 用户可以通过在画布上单击并拖动鼠标，实现内容的拖拽。
2. 滚动轮操作： 鼠标滚动轮的上下滚动效果相当于上下拖动画布。
3. Ctrl + 滚动轮缩放： 按住Ctrl键的同时使用鼠标滚动轮，实现内容的缩放。
4. 按钮操作： 同样提供按钮，用户可以通过点击按钮实现扩大、缩小及重置功能。

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	100 50(from v0.1.3)	事件节流时间间隔，单位毫秒
scrollSpeed	Number	3 1(from 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	重置时触发	-