Merge pull request #1 from ljtool/dev

feat: add scroll-x directives

package.json

@@ -32,8 +32,8 @@
   },
   "devDependencies": {
     "@vant/cli": "^6.0.0",
-    "vue": "^3.0.0",
-    "sass": "^1.49.7"
+    "sass": "^1.49.7",
+    "vue": "^3.0.0"
   },
   "eslintConfig": {
     "root": true,
@@ -44,8 +44,14 @@
   "prettier": {
     "singleQuote": true
   },
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "browserslist": [
     "Chrome >= 51",
     "iOS >= 10"
-  ]
+  ],
+  "dependencies": {
+    "lj-utils": "^0.3.7"
+  }
 }

src/demo-button/index.vue

@@ -18,7 +18,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .demo-button {
   min-width: 120px;
   color: #fff;

src/scroll-x/README.md

@@ -0,0 +1,31 @@
+# scrollX PC 鼠标横向滑动 scroll
+
+### 介绍
+
+scrollX PC 鼠标横向滑动 scroll
+
+### 引入
+
+```js
+import scrollX from 'lj-utils/directives/scrollX';
+directives: {
+   scrollX: scrollX,
+},
+// vue3 setup
+import vScrollX from 'lj-utils/directive/scrollX';
+// 或
+import {scrollX as vScrollX} from 'lj-utils/directive/scrollX';
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<div
+  v-scroll-x
+  style="height: 100px; width: 100vw; background: grey; overflow: auto"
+>
+  <div style="width: 200vw; background: grey">test text</div>
+</div>
+```

src/scroll-x/demo/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <demo-block title="鼠标点击内容移动">
+    <div
+      id="a"
+      v-scroll-x
+      style="height: 100px; width: 100vw; background: grey; overflow: auto"
+    >
+      <div style="width: 200vw; background: grey">test text</div>
+      <div style="width: 200vw; background: grey">
+        test texttest texttest texttest texttest texttest text
+      </div>
+    </div>
+  </demo-block>
+</template>
+
+<script setup>
+import { scrollX as vScrollX } from 'lj-utils/directive/scrollX';
+</script>

vant.config.mjs

@@ -35,6 +35,15 @@ export default {
           },
         ],
       },
+      {
+        title: 'directives',
+        items: [
+          {
+            path: 'scroll-x',
+            title: 'scroll-x pc横向滚动',
+          },
+        ],
+      },
     ],
   },
 };