{"_id":"@51jbs/vue2-toolkit","_rev":"2-4d9a9ebf3a9d47a8d07b7b0b5855b063","name":"@51jbs/vue2-toolkit","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@51jbs/vue2-toolkit","version":"1.0.1","keywords":["vue2","toolkit","message","directives","51jbs"],"author":{"name":"Chuanjing Li"},"license":"MIT","_id":"@51jbs/vue2-toolkit@1.0.1","maintainers":[{"name":"chuanjing729","email":"chuanjing729@gmail.com"}],"dist":{"shasum":"546c74fdaf5ef67956c85da9dba3faa9f74139b8","tarball":"https://registry.npmjs.org/@51jbs/vue2-toolkit/-/vue2-toolkit-1.0.1.tgz","fileCount":53,"integrity":"sha512-zUy2iEzR89h08ss5gM5HqW1PPa6VKorOKk4PyYPedywEf627hkaWME3ulVt1fRqeo+GmyDQT4oeiVI7YrP1nWg==","signatures":[{"sig":"MEQCIES4MnEcy8MaaOO4+n5okUvSBwlwOulDs8LPxQh2thKdAiBuzb9CmsLHlgONKXZv3qVncCy0gOJg0kDi4yVHnittwA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82266},"main":"dist/index.js","_from":"file:51jbs-vue2-toolkit-1.0.1.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"tsc --watch","test":"jest","build":"tsc"},"_npmUser":{"name":"chuanjing729","email":"chuanjing729@gmail.com"},"_resolved":"/tmp/258370662ae29306517cc23099d98960/51jbs-vue2-toolkit-1.0.1.tgz","_integrity":"sha512-zUy2iEzR89h08ss5gM5HqW1PPa6VKorOKk4PyYPedywEf627hkaWME3ulVt1fRqeo+GmyDQT4oeiVI7YrP1nWg==","_npmVersion":"10.8.2","description":"Vue2专用工具库，提供统一的消息提示、指令、mixins等","directories":{},"_nodeVersion":"20.19.6","_hasShrinkwrap":false,"devDependencies":{"vue":"^2.6.0","jest":"^30.2.0","ts-jest":"^29.4.6","typescript":"^5.0.0","@types/jest":"^30.0.0","@types/node":"^20.19.27","jest-environment-jsdom":"^30.2.0"},"peerDependencies":{"vue":"^2.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue2-toolkit_1.0.1_1766011045805_0.8457028231685142","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@51jbs/vue2-toolkit","version":"1.0.2","description":"Vue2专用工具库，提供统一的消息提示、指令、mixins等","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","keywords":["vue2","toolkit","message","directives","51jbs"],"author":{"name":"Chuanjing Li"},"license":"MIT","peerDependencies":{"vue":"^2.6.0"},"devDependencies":{"@types/jest":"^30.0.0","@types/node":"^20.19.27","jest":"^30.2.0","jest-environment-jsdom":"^30.2.0","ts-jest":"^29.4.6","typescript":"^5.0.0","vue":"^2.6.0"},"scripts":{"build":"tsc","test":"jest","dev":"tsc --watch"},"_id":"@51jbs/vue2-toolkit@1.0.2","_integrity":"sha512-xDMULcIMPByPUqWztGlth784Ht2+H3yXlTAzZo2a+0HAMW3FZe8zMXsqKacXsfLW3ETn7z0LziF2iVs9e1pdLw==","_resolved":"/tmp/693d6bce405a03d68e9da10514334732/51jbs-vue2-toolkit-1.0.2.tgz","_from":"file:51jbs-vue2-toolkit-1.0.2.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-xDMULcIMPByPUqWztGlth784Ht2+H3yXlTAzZo2a+0HAMW3FZe8zMXsqKacXsfLW3ETn7z0LziF2iVs9e1pdLw==","shasum":"dc81dce832cea47c92c0f92d8e04e044142cf71d","tarball":"https://registry.npmjs.org/@51jbs/vue2-toolkit/-/vue2-toolkit-1.0.2.tgz","fileCount":64,"unpackedSize":100939,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHO+IMPvePguacMeLRSeWyBr4wEHI96eZZYlZ05xj8VRAiEA8h3fhFWgj51RbXwQ4SN8IVcq/tohKOwlO8/z2XVLqfw="}]},"_npmUser":{"name":"chuanjing729","email":"chuanjing729@gmail.com"},"directories":{},"maintainers":[{"name":"chuanjing729","email":"chuanjing729@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue2-toolkit_1.0.2_1766322984300_0.5895958028809971"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-17T22:37:25.695Z","modified":"2025-12-21T13:16:24.680Z","1.0.1":"2025-12-17T22:37:25.996Z","1.0.2":"2025-12-21T13:16:24.457Z"},"author":{"name":"Chuanjing Li"},"license":"MIT","keywords":["vue2","toolkit","message","directives","51jbs"],"description":"Vue2专用工具库，提供统一的消息提示、指令、mixins等","maintainers":[{"name":"chuanjing729","email":"chuanjing729@gmail.com"}],"readme":"# @51jbs/vue2-toolkit\n\n> Vue2 专用工具库，提供统一的消息提示、指令、mixins 等，解决项目中127处消息提示不一致问题\n\n## 📦 安装\n\n```bash\nnpm install @51jbs/vue2-toolkit\n```\n\n## 🚀 快速使用\n\n### 全量引入\n\n```javascript\nimport Vue from 'vue'\nimport Vue2Toolkit from '@51jbs/vue2-toolkit'\n\nVue.use(Vue2Toolkit)\n```\n\n### 按需引入\n\n```javascript\nimport Vue from 'vue'\nimport { messagePlugin, debounceDirective } from '@51jbs/vue2-toolkit'\n\n// 使用消息提示插件\nVue.use(messagePlugin)\n\n// 注册防抖指令\nVue.directive('debounce', debounceDirective)\n```\n\n## 📚 功能列表\n\n### 1. 消息提示插件\n\n**解决问题**：统一项目中127处不一致的消息提示\n\n```javascript\n// ✅ 统一方式\nthis.$message.success('操作成功')\nthis.$message.error('操作失败')\nthis.$message.warning('警告信息')\nthis.$message.info('提示信息')\n\n// ❌ 避免以下不一致的方式\nthis.$message({ type: 'success', message: '成功' })\nthis.$message('成功')\n```\n\n### 2. 防抖指令\n\n**避免重复点击**\n\n```vue\n<template>\n  <!-- 默认300ms防抖 -->\n  <button v-debounce=\"handleClick\">点击</button>\n  \n  <!-- 自定义500ms防抖 -->\n  <button v-debounce:500=\"handleClick\">点击</button>\n</template>\n\n<script>\nexport default {\n  methods: {\n    handleClick() {\n      console.log('只会执行一次')\n    }\n  }\n}\n</script>\n```\n\n### 3. 节流指令\n\n**控制高频事件触发频率**\n\n```vue\n<template>\n  <!-- 监听滚动事件，300ms节流 -->\n  <div v-throttle:scroll=\"handleScroll\">内容区域</div>\n  \n  <!-- 自定义节流时间 -->\n  <div v-throttle:scroll=\"[handleScroll, 500]\">内容区域</div>\n</template>\n\n<script>\nexport default {\n  methods: {\n    handleScroll() {\n      console.log('滚动事件被节流处理')\n    }\n  }\n}\n</script>\n```\n\n### 4. 剪贴板指令\n\n**一键复制文本内容**\n\n```vue\n<template>\n  <!-- 复制静态文本 -->\n  <button v-clipboard=\"'复制的文本内容'\" @success=\"onCopySuccess\" @error=\"onCopyError\">\n    复制\n  </button>\n  \n  <!-- 复制动态文本 -->\n  <button v-clipboard=\"dynamicText\" @success=\"onCopySuccess\">\n    复制动态内容\n  </button>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      dynamicText: '这是动态文本内容'\n    }\n  },\n  methods: {\n    onCopySuccess() {\n      this.$message.success('复制成功')\n    },\n    onCopyError() {\n      this.$message.error('复制失败')\n    }\n  }\n}\n</script>\n```\n\n### 5. 权限控制指令\n\n**基于用户权限控制元素显示**\n\n```vue\n<template>\n  <!-- 单个权限控制 -->\n  <button v-permission=\"'admin'\">管理员按钮</button>\n  \n  <!-- 多个权限控制（满足任一即可） -->\n  <button v-permission=\"['admin', 'editor']\">编辑按钮</button>\n</template>\n\n<script>\nexport default {\n  // 在Vue实例中设置用户权限\n  created() {\n    this.$permissions = ['admin', 'user']\n  }\n}\n</script>\n```\n\n### 6. 懒加载指令\n\n**图片懒加载优化性能**\n\n```vue\n<template>\n  <!-- 图片懒加载 -->\n  <img v-lazy=\"imageUrl\" alt=\"懒加载图片\">\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      imageUrl: 'https://example.com/image.jpg'\n    }\n  }\n}\n</script>\n```\n\n### 7. 自动聚焦指令\n\n**自动聚焦输入框等元素**\n\n```vue\n<template>\n  <!-- 页面加载后自动聚焦 -->\n  <input v-focus placeholder=\"请输入内容\">\n  \n  <!-- 条件性聚焦 -->\n  <input v-focus=\"shouldFocus\" placeholder=\"条件性聚焦\">\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      shouldFocus: true\n    }\n  }\n}\n</script>\n```\n\n### 8. 拖拽指令\n\n**简单拖拽功能**\n\n```vue\n<template>\n  <!-- 可拖拽的对话框 -->\n  <div v-drag class=\"dialog\">\n    可拖拽的对话框\n  </div>\n</template>\n\n<style>\n.dialog {\n  position: absolute;\n  width: 300px;\n  height: 200px;\n  border: 1px solid #ccc;\n  background: white;\n}\n</style>\n```\n\n### 9. 尺寸监听指令\n\n**监听元素尺寸变化**\n\n```vue\n<template>\n  <div v-resize=\"handleResize\">\n    尺寸变化监听区域\n  </div>\n</template>\n\n<script>\nexport default {\n  methods: {\n    handleResize(size) {\n      console.log('元素尺寸变化:', size.width, size.height)\n    }\n  }\n}\n</script>\n```\n\n## 🧩 Mixins（混合）\n\n### 1. 事件管理 Mixin\n\n**自动管理事件监听器，防止内存泄漏**\n\n```javascript\nimport { eventManager } from '@51jbs/vue2-toolkit'\n\nexport default {\n  mixins: [eventManager],\n  mounted() {\n    // 添加 DOM 事件监听器\n    this.$_addEventListener(window, 'resize', this.handleWindowResize)\n    \n    // 添加 Vue 事件监听器\n    this.$_on(this.$bus, 'custom-event', this.handleCustomEvent)\n  },\n  methods: {\n    handleWindowResize() {\n      console.log('窗口尺寸变化')\n    },\n    handleCustomEvent(data) {\n      console.log('自定义事件:', data)\n    }\n  }\n}\n```\n\n### 2. 定时器管理 Mixin\n\n**自动管理定时器，防止内存泄漏**\n\n```javascript\nimport { timerManager } from '@51jbs/vue2-toolkit'\n\nexport default {\n  mixins: [timerManager],\n  mounted() {\n    // 创建定时器\n    this.timerId = this.$_setTimeout(() => {\n      console.log('延时执行')\n    }, 1000)\n    \n    // 创建周期性定时器\n    this.intervalId = this.$_setInterval(() => {\n      console.log('周期性执行')\n    }, 2000)\n  },\n  beforeDestroy() {\n    // 定时器会在 mixin 中自动清理，无需手动处理\n  }\n}\n```\n\n### 3. 权限管理 Mixin\n\n**便捷的权限检查功能**\n\n```javascript\nimport { permissionManager } from '@51jbs/vue2-toolkit'\n\nexport default {\n  mixins: [permissionManager],\n  methods: {\n    handleClick() {\n      // 检查权限\n      if (this.$_hasPermission('edit')) {\n        // 有编辑权限\n        this.editItem()\n      } else {\n        // 无权限提示\n        this.$message.warning('您没有编辑权限')\n      }\n    },\n    \n    // 权限检查装饰器\n    handleDelete() {\n      this.$_checkPermission('delete', () => {\n        // 有权限时执行\n        this.deleteItem()\n      }, () => {\n        // 无权限时执行\n        this.$message.warning('您没有删除权限')\n      })\n    }\n  }\n}\n```\n\n### 4. Observer 管理 Mixin\n\n**自动管理各种 Observer，防止内存泄漏**\n\n```javascript\nimport { observerManager } from '@51jbs/vue2-toolkit'\n\nexport default {\n  mixins: [observerManager],\n  mounted() {\n    // 创建尺寸监听器\n    this.$_createResizeObserver(this.$el, (entries) => {\n      console.log('元素尺寸变化:', entries[0].contentRect)\n    })\n    \n    // 创建交叉观察器\n    this.$_createIntersectionObserver(this.$el, (entries) => {\n      console.log('元素可见性变化:', entries[0].isIntersecting)\n    })\n  }\n}\n```\n\n## 🎯 解决的问题\n\n| 问题 | 解决方案 |\n|------|---------|\n| **127处消息提示不一致** | `messagePlugin` 统一消息提示方式 |\n| **重复点击导致重复请求** | `v-debounce` 防抖指令 |\n| **高频事件性能问题** | `v-throttle` 节流指令 |\n| **手动管理事件监听器** | `eventManager` mixin 自动清理 |\n| **定时器内存泄漏** | `timerManager` mixin 自动清理 |\n| **权限控制代码重复** | `v-permission` 指令和 `permissionManager` mixin |\n| **图片加载性能问题** | `v-lazy` 懒加载指令 |\n| **Observer 管理复杂** | `observerManager` mixin 自动清理 |\n\n## 📊 功能统计\n\n- **9个指令**（防抖、节流、剪贴板、权限、懒加载、聚焦、拖拽、尺寸监听）\n- **4个Mixins**（事件管理、定时器管理、权限管理、Observer管理）\n- **1个插件**（消息提示）\n- **500+行**源码\n\n## 📄 License\n\nMIT © Chuanjing Li","readmeFilename":"README.md"}