ollo - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

index.d.ts

@@ -1,3 +0,3 @@
-import { Plugin as VuePlugin } from 'vue';
+import { Plugin } from 'vue';
 
-export function scroller(): VuePlugin;
+export const scroller: Plugin;

index.js

@@ -7,23 +7,42 @@ /**
 
-function scroller() {
-    return {
-        install(app) {
-            app.directive('scroll', el => {
-                el.addEventListener('touchstart', () => {
-                    if (el.scrollTop === 0) {
-                        el.scrollTop = 1;
-                    }
-                });
-                el.addEventListener('touchmove', event => {
-                    if (el.offsetHeight < el.scrollHeight) {
-                        event._isScroller = true;
-                    }
-                });
-            });
-        }
-    };
+function __touchmoveCb(event) {
+    if (this.offsetHeight < this.scrollHeight) {
+        event._isScroller = true;
+    }
 }
 
+function __touchstartCb() {
+    if (this.scrollTop === 0) {
+        this.scrollTop = 1;
+    }
+}
+
+const scroller = {
+    install(app) {
+        app.directive('scroll', (el, binding) => {
+            const { value } = binding;
+
+            if (el.__bindScroll) {
+                if (value || value === undefined) {
+                    return;
+                }
+
+                el.__bindScroll = undefined;
+                el.removeEventListener('touchstart', __touchstartCb);
+                el.removeEventListener('touchmove', __touchmoveCb);
+
+                return;
+            }
+
+            if (value || value === undefined) {
+                el.__bindScroll = true;
+                el.addEventListener('touchstart', __touchstartCb);
+                el.addEventListener('touchmove', __touchmoveCb);
+            }
+        });
+    }
+}
+
 module.exports = {
     scroller
 };

package.json

 {
   "name": "ollo",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "公众号H5🈲触顶后允许局部元素滚动解决方案",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # ollo
 
-## 本插件绑定Vue3环境
+## Vue3环境插件
 
+### 注册局部滚动指令
+
+- 支持响应式变量
+
 ```ts
@@ -14,2 +18,24 @@ // main.ts (入口文件)
 app.use(scroller);
+```
+
+```html
+<!-- case 1 -->
+<template>
+    <textarea v-scroll />
+</template>
+
+<!-- case 2 -->
+<template>
+    <textarea v-scroll="true" />
+</template>
+
+<!-- case 3 -->
+<template>
+    <textarea v-scroll="false" />
+</template>
+
+<!-- case 4 -->
+<template>
+    <textarea v-scroll="shouldScroll" />
+</template>
 ```

No alert changes

Improved metrics

Total package byte prevSize

3133

31.69%

Lines of code

41

46.43%

Number of lines in readme file

40

185.71%

No dependency changes