Merge pull request #8 from pasBone/dev

Dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-fit-next",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "description": "Vue directive with fit screen kit 一个屏幕自适应工具集合的vue指令, 具有拖拽、缩放、入场出场动画",
   "author": "pasbone",
   "license": "MIT",

src/events.ts

@@ -1,12 +1,12 @@
 import { BehaviorSubject, bufferWhen, debounceTime, filter, fromEvent, map, merge, mergeMap, scan, switchMap, takeUntil, tap, throttleTime } from 'rxjs'
-import { element$ } from './fit'
+import { defaultFitOptions, element$ } from './fit'
 import { getTranslateValue } from './utils'
 
 /** 设置 body transform */
 const bodyTransform$ = new BehaviorSubject({ scale: 1, x: 0, y: 0 })
 
 /** 每次缩放的增量. */
-const SCALE_STEP = 0.05
+// const SCALE_STEP = defaultFitOptions.scaleStep || 0.05
 
 /** body 元素 */
 const body = document.querySelector('body')!
@@ -138,12 +138,13 @@ function createMask() {
 
 /** 计算 transform 的值 */
 function calcTransform(seed: Required<TransformType>, event: WheelEvent) {
+  const SCALE_STEP = defaultFitOptions.scaleStep || 0.05
   // eslint-disable-next-line prefer-const
   let { scale, x, y } = seed
   const xs = (event.clientX - x) / scale
   const ys = (event.clientY - y) / scale
   scale += (event.deltaY > 0 ? -SCALE_STEP : SCALE_STEP)
-  if (scale >= 0.1 && scale <= 3) {
+  if (scale >= 0.1 && scale <= 10) {
     const dx = event.clientX - xs * scale
     const dy = event.clientY - ys * scale
     return { scale, x: dx, y: dy }

src/types.ts

@@ -28,6 +28,8 @@ export interface FitOptions {
   animate?: Animate
   /** 适配方式 */
   mode?: 'zoom' | 'scale'
+  /** 每次鼠标滚动缩放的增量 */
+  scaleStep?: number
 }
 
 /** 单个组件的个性配置 */
@@ -54,7 +56,6 @@ export interface ElementOptions extends Animate {
 
   /** 出场入场动画 */
   animate?: Animate
-
 }
 
 export type RequiredAnimateType = Required<AnimateType>