vue-scaling

基于vue开箱即用缩放组件 (A super easy zomm components for Vue!)

pc & wap 端效果

如果图片打不开...

掘金地址

安装

npm i vue-scaling

使用组件

注册

// 全局
import vueScaling from 'vue-scaling'
Vue.use(vueScaling)

使用

// 组件需要设置宽高样式
<vueScaling style="width: 400px;height:400px;overflow: hidden" ref="vueScalingRef">
  <div style="background:rgba(97, 72, 72, 0.5);width:400px;height:400px"></div>
</vueScaling>

特性

• 使用 TypeScript 构建，完整的单元测试，提供完整的类型定义文件。
• 现代浏览器和 IE9 及以上。
• pc&wap 通用的缩放放大点击 Vue 组件 开箱即用。

API

参数

属性	含义	类型	默认值	是否必填
maxScale	最大缩放倍数	Number	2	否
minScale	最小缩放倍数	Number	0.5	否
tapNumber	进行缩放的点击次数(可填 1 or 2)	Number	2	否
stopBorder	如果stopBorder阻力大于0 移动时将会有边界判定	Number	0	否
animation	初始动画(在加载完成后会有一个动画效果)	Boolean	false	否

emit方法

属性	含义	返回值	是否必填
moveChange	移动时的emit	{point2DObj: {x, y}, tMatrix: matrix数组}	否
scaleChange	缩放时的emit	{scale, {x, y}, tMatrix: matrix数组}	否

内置方法 通过this.$refs.vueScalingRef 调用

• this.$refs.vueScalingRef.backState() 回到初始状态

注意

通过改变css的overflow:hidden即可实现 拖动缩放隐藏边界的效果

相关参考

1. vue-TypeScript
2. vue-touch
3. matrix ...

如果你觉得这个项目有趣 务必请给个star~ (҂‾ ▵‾)σ(˚▽˚’!)/

给我star~

交流

有什么意见,或者bug 或者想一起开发vue-scaling

ISS

提iss

更新日志

v0.2.0

• 删除 width,height 参数。推荐改写为css样式作用在组件上
• 增加初始化加载动画