{"_id":"@chenpeng001/my-antd-extend","name":"@chenpeng001/my-antd-extend","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@chenpeng001/my-antd-extend","version":"1.0.0","description":"基于 Ant Design Vue 3 的二次封装组件库","author":{"name":"chenpeng"},"license":"MIT","keywords":["ant-design-vue","vue3","components","ui-library"],"main":"dist/my-antd-extend.cjs.js","module":"dist/my-antd-extend.esm.js","unpkg":"dist/my-antd-extend.umd.js","jsdelivr":"dist/my-antd-extend.umd.js","types":"dist/index.d.ts","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"ant-design-vue":"^3.0.0","vue":"^3.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^4.0.0","@vitejs/plugin-vue-jsx":"^3.0.0","ant-design-vue":"^3.0.0","vite":"^4.0.0","vue":"^3.0.0"},"gitHead":"9334b14c2fdeee4cf57817646683027fe263c876","_id":"@chenpeng001/my-antd-extend@1.0.0","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-FacojYulHJNBy3qL9Utpen9gb0SZCR8r9j67ixQootNp0426bwUIXixfrC65RxIHaVtGanxpD5ymRD0+cJgdEA==","shasum":"8700823b1463bfffdba8b6c5962451059603f32d","tarball":"https://registry.npmjs.org/@chenpeng001/my-antd-extend/-/my-antd-extend-1.0.0.tgz","fileCount":18,"unpackedSize":97168,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDdv0wPkFUiNKt3sC7kjBOCNJN0ckvP3LQ0EAwrvxex4QIhAKQxpSuofAKNdRTyFMQCiKEUPaevnXACb/VwmS5kvLkS"}]},"_npmUser":{"name":"chenpeng001","email":"15670342763@163.com"},"directories":{},"maintainers":[{"name":"chenpeng001","email":"15670342763@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/my-antd-extend_1.0.0_1781707505694_0.6168851485153206"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-17T14:45:05.520Z","1.0.0":"2026-06-17T14:45:05.830Z","modified":"2026-06-17T14:45:06.081Z"},"maintainers":[{"name":"chenpeng001","email":"15670342763@163.com"}],"description":"基于 Ant Design Vue 3 的二次封装组件库","keywords":["ant-design-vue","vue3","components","ui-library"],"author":{"name":"chenpeng"},"license":"MIT","readme":"# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.\n\nLearn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).\n\nmy-antd-extend/\n├── packages/               # 组件库源码\n│   ├── MyButton/\n│   │   ├── index.vue\n│   │   └── index.js\n│   ├── MyInput/\n│   │   ├── index.vue\n│   │   └── index.js\n│   ├── MyTable/\n│   │   ├── index.vue\n│   │   └── index.js\n│   └── index.js           # 统一导出入口\n├── examples/              # 开发环境示例\n│   ├── App.vue\n│   └── main.js\n├── dist/                  # 打包输出目录\n├── index.html\n├── package.json\n├── vite.config.js\n└── README.md\n\n1. 创建项目\n# 创建项目\nnpm create vite@latest my-antd-extend -- --template vue\ncd my-antd-extend\n\n# 安装依赖\nnpm install ant-design-vue vue-router@4\n\n# 安装开发依赖\nnpm install -D @vitejs/plugin-vue-jsx\n\n2. 调整目录结构\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>My Antd Extend</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/examples/main.js\"></script>\n  </body>\n</html>\n\n3. 编写组件\n组件1: MyButton (packages/MyButton/index.vue)\n<template>\n  <a-button\n    v-bind=\"$attrs\"\n    v-on=\"$listeners\"\n    :type=\"type\"\n    :size=\"size\"\n    :loading=\"loading\"\n    :class=\"['my-btn', customClass]\"\n  >\n    <!-- 支持图标插槽 -->\n    <template #icon v-if=\"$slots.icon\">\n      <slot name=\"icon\" />\n    </template>\n    <!-- 默认插槽显示文本 -->\n    <slot />\n  </a-button>\n</template>\n\n<script>\nexport default {\n  name: 'MyButton',\n  inheritAttrs: false,\n  props: {\n    // 按钮类型\n    type: {\n      type: String,\n      default: 'primary',\n      validator: (val) => ['primary', 'default', 'dashed', 'text', 'link'].includes(val)\n    },\n    // 按钮大小\n    size: {\n      type: String,\n      default: 'default',\n      validator: (val) => ['large', 'default', 'small'].includes(val)\n    },\n    // 加载状态\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    // 自定义样式类\n    customClass: {\n      type: String,\n      default: ''\n    },\n    // 是否显示确认弹窗\n    confirmBefore: {\n      type: Boolean,\n      default: false\n    },\n    confirmText: {\n      type: String,\n      default: '确定执行此操作吗？'\n    }\n  },\n  methods: {\n    handleClick(event) {\n      // 如果有确认弹窗，先弹窗再执行\n      if (this.confirmBefore) {\n        this.$confirm({\n          title: '提示',\n          content: this.confirmText,\n          onOk: () => {\n            this.$emit('click', event)\n          }\n        })\n      } else {\n        this.$emit('click', event)\n      }\n    }\n  }\n}\n</script>\n\n<style scoped>\n.my-btn {\n  /* 添加业务默认样式 */\n  border-radius: 6px;\n  font-weight: 500;\n  transition: all 0.3s;\n}\n\n/* 自定义业务主题色 */\n.my-btn-primary {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border: none;\n}\n\n.my-btn-primary:hover {\n  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n}\n</style>\n\n# My Antd Extend\n\n基于 Ant Design Vue 3 二次封装的组件库。\n\n## 安装\n\n```bash\nnpm install @your-name/my-antd-extend\n# or\npnpm add @your-name/my-antd-extend\n\n使用\n全局注册\n\nimport { createApp } from 'vue'\nimport MyAntdExtend from '@your-name/my-antd-extend'\nimport 'ant-design-vue/dist/reset.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(MyAntdExtend)\napp.mount('#app')","readmeFilename":"README.md","_rev":"1-750de327deb3ddbc28a68ca1cb225524"}