Merge branch 'dev' of https://github.com/vangleer/es-drager into dev

Author: vangleer

packages/docs/src/examples/basic.vue

@@ -37,7 +37,7 @@ const dragList = ref([
     { color: '#f44336', text: 'examples.rotateAndResize', rotatable: true }
   ],
   [
-    { color: '#6A00FF', text: 'examples.skew', skewable: true },
+    { color: '#6A00FF', text: 'examples.skew', skewable: true, skew: [10, 10] },
     { color: '#6A00FF', text: 'examples.boundary', boundary: true },
     { color: '#D80073', text: 'examples.checkCollision', checkCollision: true },
     { color: '#1BA1E2', text: 'examples.minSzie', minWidth: 10, minHeight: 10 }

packages/drager/src/drager.ts

@@ -85,6 +85,10 @@ export const DragerProps = {
     type: Number,
     default: 0
   },
+  skew: {
+    type: Array as PropType<number[]>,
+    default: () => [0, 0]
+  },
   color: {
     type: String,
     default: '#3a7afe'

packages/drager/src/drager.vue

@@ -140,9 +140,7 @@ const dragStyle = computed(() => {
 
   if (skew && skew.length) {
     let skewStr = `skewX(${skew[0]}deg)`
-    if (skew[1]) {
-      skewStr += ` skewY(${skew[1]}deg)`
-    }
+    skewStr += ` skewY(${skew[1] ?? 0}deg)`
 
     transform.push(skewStr)
   }
@@ -306,6 +304,16 @@ watch(
   { deep: true }
 )
 
+watch(
+  () => props.skew,
+  (skew, oldSkew) => {
+    dragData.value.skew = skew ?? []
+  },
+  {
+    deep: true,
+  }
+)
+
 watch(
   () => props.selected,
   val => {

packages/drager/src/use-drager.ts

@@ -29,7 +29,8 @@ export function useDrager(
     height: props.height,
     left: props.left,
     top: props.top,
-    angle: props.angle
+    angle: props.angle,
+    skew: props.skew
   })
   const { marklineEmit } = useMarkline(targetRef, props)
   // 限制多个鼠标键按下的情况