ollo - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

longtouch.js

+/**
+ * @file DOM长按指令
+ * @date 2022-07-22
+ * @author Perfumere
+ */
+
+export const longtouch = {
+    install(app) {
+        app.directive('longtouch', (el, binding) => {
+            const { value, arg = 400 } = binding;
+            let timer = null;
+
+            if (typeof value !== 'function') {
+                return;
+            }
+
+            function startTouch() {
+                timer = setTimeout(value, arg);
+            }
+            function cancelTouch() {
+                clearTimeout(timer);
+            }
+
+            if (el.__bindLongTouch) {
+                el.removeEventListener('touchstart', startTouch);
+                el.removeEventListener('touchmove', cancelTouch);
+                el.removeEventListener('touchend', cancelTouch);
+                el.removeEventListener('touchcancel', cancelTouch);
+
+                return;
+            }
+
+            el.__bindLongTouch = true;
+            el.addEventListener('touchstart', startTouch);
+            el.addEventListener('touchmove', cancelTouch);
+            el.addEventListener('touchend', cancelTouch);
+            el.addEventListener('touchcancel', cancelTouch);
+        });
+    }
+};
+
+module.exports = {
+    longtouch
+};

index.d.ts

 import { Plugin } from 'vue';
 
 export const scroller: Plugin;
+export const longtouch: Plugin;

index.js

@@ -8,5 +8,7 @@ /**
 const { scroller } = require('./scroller');
+const { longtouch } = require('./longtouch');
 
 module.exports = {
-    scroller
+    scroller,
+    longtouch
 };

package.json

 {
   "name": "ollo",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "公众号H5🈲触顶后允许局部元素滚动解决方案",
@@ -13,3 +13,3 @@ "main": "index.js",
   ],
-  "author": "Perfumere <[e-mail]>",
+  "author": "Perfumere <[e-mail]>",
   "license": "MIT",
@@ -16,0 +16,0 @@ "publishConfig": {

README.md

@@ -18,2 +18,3 @@ # ollo
 app.use(scroller);
+app.use(longtouch);
 ```
@@ -41,2 +42,23 @@
 </template>
-```
+```
+
+
+```html
+<!-- case 1 -->
+<template>
+    <!-- 单指按下400ms, 触发 -->
+    <textarea v-longtouch="callback" />
+</template>
+
+<!-- case 2 -->
+<template>
+    <!-- 单指按下500ms, 触发 -->
+    <textarea v-longtouch:500="callback" />
+</template>
+
+<script setup>
+function callback() {
+    // doSomething
+}
+</script>
+```

No alert changes

Improved metrics

Total package byte prevSize

5170

46.75%

Number of package files

7

16.67%

Lines of code

95

72.73%

Number of lines in readme file

63

57.5%

No dependency changes