lyb-vue-hooks 1.0.0

package/README.md

@@ -0,0 +1,15 @@
+# Lib自用VueHooks工具方法
+
+## 目录
+
+### 基础
+
+\- [LibJsGetDataType-数据类型](#useTabSlider-Tab动画)
+
+
+## EL-元素控制
+
+### useTabSlider-Tab动画
+
+> Tab菜单切换动画
+

package/el/useTabSlider.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from "vue";
+export declare const useTabSlider: (tabRefs: Ref<HTMLElement[]>, defaultIndex?: number) => {
+    activeIndex: Ref<number, number>;
+    tabRefs: Ref<HTMLElement[], HTMLElement[]>;
+    sliderStyle: import("vue").ComputedRef<{
+        width: string;
+        transform: string;
+    }>;
+    setActive: (index: number) => Promise<void>;
+    updateSlider: () => void;
+};

package/el/useTabSlider.js

@@ -0,0 +1,43 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ref, onMounted, nextTick, computed } from "vue";
+export const useTabSlider = (tabRefs, defaultIndex = 0) => {
+    const activeIndex = ref(defaultIndex);
+    const slider = ref({
+        width: 0,
+        left: 0,
+    });
+    const sliderStyle = computed(() => ({
+        width: `${slider.value.width}px`,
+        transform: `translateX(${slider.value.left}px)`,
+    }));
+    const updateSlider = () => {
+        const tab = tabRefs.value[activeIndex.value];
+        if (!tab)
+            return;
+        slider.value.width = tab.offsetWidth;
+        slider.value.left = tab.offsetLeft;
+    };
+    const setActive = (index) => __awaiter(void 0, void 0, void 0, function* () {
+        activeIndex.value = index;
+        yield nextTick();
+        updateSlider();
+    });
+    onMounted(() => {
+        nextTick(updateSlider);
+    });
+    return {
+        activeIndex,
+        tabRefs,
+        sliderStyle,
+        setActive,
+        updateSlider,
+    };
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "lyb-vue-hooks",
+  "version": "1.0.0",
+  "description": "自用VueHooks库",
+  "license": "ISC",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": "./index.js",
+    "./el/*": "./el/*"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "el",
+    "el/*"
+  ],
+  "sideEffects": false,
+  "author": {
+    "name": "lengyibai",
+    "email": "1329670984@qq.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lengyibai/lyb-js.git"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "hooks",
+    "lyb"
+  ],
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  }
+}