feat: 支持 vue.extend 组件引入使用

dengwb1991 · Jun 7, 2023 · 7586bed · 7586bed
1 parent c522316
commit 7586bed
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 117 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,18 @@
+## 0.0.6
+2023-06-07
+
+支持 vue.extend 组件引入使用
+
+```js
+import dragging from 'vue-directive-dragging'
+
+let D3KitConstrutor = Vue.extend({
+  directives: {
+    dragging: dragging.draggingDirective
+  }
+})
+```
+
 ## 0.0.5
 2023-02-13
 

diff --git a/dist/vue-directive-dragging.esm.js b/dist/vue-directive-dragging.esm.js
@@ -1,5 +1,5 @@
 /**
- * vue-directive-dragging v0.0.5
+ * vue-directive-dragging v0.0.6
  * (c) 2023 dengwb
  * @license MIT
  */
@@ -26,52 +26,55 @@ var events = {
   }
 };
 
-function install(Vue, options) {
-  var _el = null;
-  var diffTop = null;
-  var diffLeft = null;
-  var value = {};
+var _el = null;
+var diffTop = null;
+var diffLeft = null;
+var value = {};
 
-  function handleDragStart(event) {
-    value.prevent && event.preventDefault();
-    diffLeft = event.touches[0].pageX - _el.offsetLeft;
-    diffTop = event.touches[0].pageY - _el.offsetTop;
-  }
+function handleDragStart(event) {
+  value.prevent && event.preventDefault();
+  diffLeft = event.touches[0].pageX - _el.offsetLeft;
+  diffTop = event.touches[0].pageY - _el.offsetTop;
+}
 
-  function handleDragMove(event) {
-    event.preventDefault();
-    var left = event.touches[0].pageX - diffLeft;
-    var top = event.touches[0].pageY - diffTop;
+function handleDragMove(event) {
+  event.preventDefault();
+  var left = event.touches[0].pageX - diffLeft;
+  var top = event.touches[0].pageY - diffTop;
 
-    _el.style.left = left + 'px';
-    _el.style.top = top + 'px';
-  }
-  function saveDragItem(el, binding, vnode) {
-    _el = el;
-    value = _extends({
-      prevent: binding.prevent === false ? false : true
-    }, binding.value);
-    events.on(el, 'touchstart', handleDragStart);
-    events.on(el, 'touchmove', handleDragMove);
-  }
+  _el.style.left = left + 'px';
+  _el.style.top = top + 'px';
+}
+function saveDragItem(el, binding, vnode) {
+  _el = el;
+  value = _extends({
+    prevent: binding.prevent === false ? false : true
+  }, binding.value);
+  events.on(el, 'touchstart', handleDragStart);
+  events.on(el, 'touchmove', handleDragMove);
+}
 
-  function updateDragItem(el, binding, vnode) {}
+function updateDragItem(el, binding, vnode) {}
 
-  function removeDragItem(el, binding, vnode) {
-    events.off(el, 'touchstart', handleDragStart);
-    events.off(el, 'touchmove', handleDragMove);
-  }
+function removeDragItem(el, binding, vnode) {
+  events.off(el, 'touchstart', handleDragStart);
+  events.off(el, 'touchmove', handleDragMove);
+}
 
-  Vue.directive('dragging', {
-    bind: saveDragItem,
-    update: updateDragItem,
-    unbind: removeDragItem
-  });
+var draggingDirective = {
+  bind: saveDragItem,
+  update: updateDragItem,
+  unbind: removeDragItem
+};
+
+function install(Vue, options) {
+  Vue.directive('dragging', draggingDirective);
 }
 
 var index = {
   install: install,
-  version: '0.0.5'
+  draggingDirective: draggingDirective,
+  version: '0.0.6'
 };
 
 export default index;
diff --git a/dist/vue-directive-dragging.js b/dist/vue-directive-dragging.js
@@ -1,5 +1,5 @@
 /**
- * vue-directive-dragging v0.0.5
+ * vue-directive-dragging v0.0.6
  * (c) 2023 dengwb
  * @license MIT
  */
@@ -32,52 +32,55 @@
     }
   };
 
-  function install(Vue, options) {
-    var _el = null;
-    var diffTop = null;
-    var diffLeft = null;
-    var value = {};
+  var _el = null;
+  var diffTop = null;
+  var diffLeft = null;
+  var value = {};
 
-    function handleDragStart(event) {
-      value.prevent && event.preventDefault();
-      diffLeft = event.touches[0].pageX - _el.offsetLeft;
-      diffTop = event.touches[0].pageY - _el.offsetTop;
-    }
+  function handleDragStart(event) {
+    value.prevent && event.preventDefault();
+    diffLeft = event.touches[0].pageX - _el.offsetLeft;
+    diffTop = event.touches[0].pageY - _el.offsetTop;
+  }
 
-    function handleDragMove(event) {
-      event.preventDefault();
-      var left = event.touches[0].pageX - diffLeft;
-      var top = event.touches[0].pageY - diffTop;
+  function handleDragMove(event) {
+    event.preventDefault();
+    var left = event.touches[0].pageX - diffLeft;
+    var top = event.touches[0].pageY - diffTop;
 
-      _el.style.left = left + 'px';
-      _el.style.top = top + 'px';
-    }
-    function saveDragItem(el, binding, vnode) {
-      _el = el;
-      value = _extends({
-        prevent: binding.prevent === false ? false : true
-      }, binding.value);
-      events.on(el, 'touchstart', handleDragStart);
-      events.on(el, 'touchmove', handleDragMove);
-    }
+    _el.style.left = left + 'px';
+    _el.style.top = top + 'px';
+  }
+  function saveDragItem(el, binding, vnode) {
+    _el = el;
+    value = _extends({
+      prevent: binding.prevent === false ? false : true
+    }, binding.value);
+    events.on(el, 'touchstart', handleDragStart);
+    events.on(el, 'touchmove', handleDragMove);
+  }
 
-    function updateDragItem(el, binding, vnode) {}
+  function updateDragItem(el, binding, vnode) {}
 
-    function removeDragItem(el, binding, vnode) {
-      events.off(el, 'touchstart', handleDragStart);
-      events.off(el, 'touchmove', handleDragMove);
-    }
+  function removeDragItem(el, binding, vnode) {
+    events.off(el, 'touchstart', handleDragStart);
+    events.off(el, 'touchmove', handleDragMove);
+  }
 
-    Vue.directive('dragging', {
-      bind: saveDragItem,
-      update: updateDragItem,
-      unbind: removeDragItem
-    });
+  var draggingDirective = {
+    bind: saveDragItem,
+    update: updateDragItem,
+    unbind: removeDragItem
+  };
+
+  function install(Vue, options) {
+    Vue.directive('dragging', draggingDirective);
   }
 
   var index = {
     install: install,
-    version: '0.0.5'
+    draggingDirective: draggingDirective,
+    version: '0.0.6'
   };
 
   return index;

diff --git a/dist/vue-directive-dragging.min.js b/dist/vue-directive-dragging.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-directive-dragging",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Implementing a drag-and-drop plugin based on the vue directive",
   "main": "./dist/vue-directive-dragging.min.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -7,53 +7,56 @@ const events = {
   }
 }
 
-function install (Vue, options) {
-  let _el = null
-  let isTouch = true
-  let diffTop = null
-  let diffLeft = null
-  let value = {}
-
-  function handleDragStart (event) {
-    value.prevent && event.preventDefault()
-    diffLeft = event.touches[0].pageX - _el.offsetLeft
-    diffTop = event.touches[0].pageY - _el.offsetTop
-  }
+let _el = null
+let isTouch = true
+let diffTop = null
+let diffLeft = null
+let value = {}
 
-  function handleDragMove (event) {
-    event.preventDefault()
-    const left = event.touches[0].pageX - diffLeft
-    const top =  event.touches[0].pageY - diffTop
+function handleDragStart (event) {
+  value.prevent && event.preventDefault()
+  diffLeft = event.touches[0].pageX - _el.offsetLeft
+  diffTop = event.touches[0].pageY - _el.offsetTop
+}
 
-    _el.style.left = `${left}px`
-    _el.style.top = `${top}px`
-  }
-  function saveDragItem (el, binding, vnode) {
-    _el = el
-    value = {
-      prevent: binding.prevent === false ? false : true,
-      ...binding.value
-    }
-    events.on(el, 'touchstart', handleDragStart)
-    events.on(el, 'touchmove', handleDragMove)
-  }
-
-  function updateDragItem (el, binding, vnode) {
-  }
-
-  function removeDragItem (el, binding, vnode) {
-    events.off(el, 'touchstart', handleDragStart)
-    events.off(el, 'touchmove', handleDragMove)
+function handleDragMove (event) {
+  event.preventDefault()
+  const left = event.touches[0].pageX - diffLeft
+  const top =  event.touches[0].pageY - diffTop
+
+  _el.style.left = `${left}px`
+  _el.style.top = `${top}px`
+}
+function saveDragItem (el, binding, vnode) {
+  _el = el
+  value = {
+    prevent: binding.prevent === false ? false : true,
+    ...binding.value
   }
+  events.on(el, 'touchstart', handleDragStart)
+  events.on(el, 'touchmove', handleDragMove)
+}
+
+function updateDragItem (el, binding, vnode) {
+}
+
+function removeDragItem (el, binding, vnode) {
+  events.off(el, 'touchstart', handleDragStart)
+  events.off(el, 'touchmove', handleDragMove)
+}
+
+const draggingDirective = {
+  bind: saveDragItem,
+  update: updateDragItem,
+  unbind: removeDragItem
+}
 
-  Vue.directive('dragging', {
-    bind: saveDragItem,
-    update: updateDragItem,
-    unbind: removeDragItem
-  })
+function install (Vue, options) {
+  Vue.directive('dragging', draggingDirective)
 }
 
 export default {
   install,
+  draggingDirective,
   version: '__VERSION__'
 }