vue-zoom-container

A vue3-based mobile two-finger zoom in/out component(基于vue3的移动端双指缩放容器组件)

组件介绍

基于AlloyFinger和transfomjs,有缩放需求的同学可以拿着用用试试

功能

• 支持以双指为中心放大和缩小，特别适用于文字特别小，需要放大缩小的场景
• 双击恢复初始未缩放状态
• 禁用了IOS自带的缩放功能
• 支持最大放大比例和最小缩放比例配置
• 缩放状态下，支持单指拖动，最大拖动距离是屏幕尺寸的一半

使用方式

1.安装

$ npm install vue-zoom-container --save

$ yarn add vue-zoom-container

2.注册组件

import { createApp } from "vue";

import App from "./App.vue";
import router from "./router";
import * as VueZoomContainer from "vue-zoom-container";

const app = createApp(App);

app.use(router);

app.use(VueZoomContainer);

app.mount("#app");

3.使用组件

<ZoomDemo />组件是你想添加缩放功能的组件，用vue-zoom-container作为它的父亲级组件即可：

<vue-zoom-container><ZoomDemo /></vue-zoom-container>

这样，你的缩放需求就实现了，啦啦啦！！

扫码体验

在线Demo

或者直接扫码体验：

或者clone该项目到本地跑起来进行体验：

$ git clone [email protected]:MssText/vue-zoom-container.git

$ npm install

$ npm run dev

使用类似草料二维码的网站生成一个二维码。扫码体验即可

组件 props

name | Description ---- | --- touchList | AlloyFinger支持的所有手势事件 minScale | 最小缩小比例，默认值1 maxScale | 最大放大比例，默认值1.8 movePercent | 单指最大拖动比例,默认值0.5