分享一款前端组件画布容器组件: 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参数说明

属性参数

事件（from v0.1.7）

原文链接：https://juejin.cn/post/7328698850878079017 作者：墩墩大魔王丶