vue2-antd15-components-lib

v0.1.11

Published

4 months ago

基于Vue2和ant-design-vue 1.5.0的组件库

0High
0Medium
0Low

geek-james

vue2 ant-design-vue 1.5.0 components ui-library

Vue2 + Ant Design Vue 1.5.0 组件库

基于 Vue2 和 Ant Design Vue 1.5.0 的自定义组件库，提供高质量的 UI 组件和丰富的功能。

📦 安装

NPM

npm install vue2-antd15-components-lib

Yarn

yarn add vue2-antd15-components-lib

🔨 使用

全局引入

在 main.js 中引入组件库：

import Vue from 'vue';
import App from './App.vue';
import Vue2AntdComponentsLib from 'vue2-antd15-components-lib';

Vue.use(Vue2AntdComponentsLib);

new Vue({
  render: h => h(App),
}).$mount('#app');

按需引入

使用按需引入可以减小打包体积：

import Vue from 'vue';
import App from './App.vue';
import { MyButton, MyTable, MyTree } from 'vue2-antd15-components-lib';

Vue.use(MyButton);
Vue.use(MyTable);
Vue.use(MyTree);

// 或者直接注册单个组件
// Vue.component('MyButton', MyButton);
// Vue.component('MyTable', MyTable);
// Vue.component('MyTree', MyTree);

new Vue({
  render: h => h(App),
}).$mount('#app');

🎨 组件文档

MyButton

增强型按钮组件，基于 Ant Design Vue 的 Button 组件扩展。

示例

<template>
  <div>
    <MyButton type="primary">主要按钮</MyButton>
    <MyButton>默认按钮</MyButton>
    <MyButton type="dashed">虚线按钮</MyButton>
    <MyButton type="danger">危险按钮</MyButton>
    <MyButton :loading="true">加载中</MyButton>
  </div>
</template>

属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | type | string | 'default' | 按钮类型，可选值为 'primary'、'default'、'dashed'、'danger' | | size | string | 'default' | 按钮大小，可选值为 'large'、'default'、'small' | | loading | boolean | false | 是否加载中状态 | | disabled | boolean | false | 是否禁用状态 | | icon | string | - | 图标类型 |

事件

| 事件 | 说明 | 回调参数 | |------|------|----------| | click | 点击事件 | (event) => void |

MyTable

增强型表格组件，基于 Ant Design Vue 的 Table 组件扩展。

示例

<template>
  <MyTable
    :columns="columns"
    :dataSource="dataSource"
    :loading="loading"
    :rowKey="'id'"
  />
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age'
        },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <a href="#" onClick={() => this.handleClick(record)}>查看</a>
          )
        }
      ],
      dataSource: [
        { id: 1, name: '张三', age: 28 },
        { id: 2, name: '李四', age: 32 }
      ]
    };
  },
  methods: {
    handleClick(record) {
      console.log('点击了:', record);
    }
  }
};
</script>

属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | columns | Array | [] | 表格列的配置描述 | | dataSource | Array | [] | 数据数组 | | loading | boolean | false | 加载状态 | | rowKey | string/Function | 'key' | 表格行 key 的取值，可以是字符串或函数 | | pagination | Object/boolean | true | 分页配置 | | size | string | 'default' | 表格大小 | | bordered | boolean | false | 是否展示边框 |

事件

| 事件 | 说明 | 回调参数 | |------|------|----------| | change | 表格变化时的回调 | (pagination, filters, sorter, extra) => void |

MyTree

增强型树形组件，基于 Ant Design Vue 的 Tree 组件扩展，提供鼠标悬停显示操作按钮和节点增删改功能。

示例

<template>
  <MyTree 
    :data="treeData"
    @node-added="handleNodeAdded"
    @node-edited="handleNodeEdited"
    @node-deleted="handleNodeDeleted"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: '公司总部',
          key: '1',
          children: [
            {
              title: '技术部',
              key: '1-1'
            },
            {
              title: '产品部',
              key: '1-2'
            }
          ]
        },
        {
          title: '分公司',
          key: '2'
        }
      ]
    };
  },
  methods: {
    handleNodeAdded(node, parentKey) {
      console.log('新增节点:', node, '父节点:', parentKey);
    },
    handleNodeEdited(node) {
      console.log('编辑节点:', node);
    },
    handleNodeDeleted(node) {
      console.log('删除节点:', node);
    }
  }
};
</script>

属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | data | Array | [] | 树的数据源 | | autoExpandParent | Boolean | true | 是否自动展开父节点 |

事件

| 事件 | 说明 | 回调参数 | |------|------|----------| | node-added | 节点添加成功时触发 | (node, parentKey) => void | | node-edited | 节点编辑成功时触发 | (node) => void | | node-deleted | 节点删除成功时触发 | (node) => void | | expand | 展开/收起节点时触发 | (expandedKeys) => void | | select | 选择节点时触发 | (selectedKeys) => void |

🚀 查看示例

您可以通过以下三种方式查看组件示例：

方法一：使用批处理脚本（仅限Windows系统）

在Windows系统上，您可以直接双击examples/open-example.bat文件，这将自动在浏览器中打开示例页面。

方法二：直接打开HTML文件

最简单的方法是直接在浏览器中打开examples/index.html文件，无需安装任何依赖。

方法二：使用HTTP服务器

如果您希望通过HTTP服务器查看示例，可以执行以下命令：

cd examples
npm run install-and-serve

这将自动安装依赖并启动HTTP服务器，然后您可以在浏览器中访问http://localhost:8080查看示例。

🛠️ 开发指南

克隆项目

git clone https://github.com/your-username/vue2-antd15-components-lib.git
cd vue2-antd15-components-lib

安装依赖

npm install
# 或

yarn install

构建

npm run build
# 或

yarn build

🚀 发布指南

项目已配置自动版本递增的发布脚本，可以使用以下命令快速发布新版本：

发布补丁版本（增加最后一位数字）

适用于修复bug或微小改进（如：0.1.1 → 0.1.2）

npm run publish:patch

发布次版本（增加中间一位数字）

适用于添加新功能但向下兼容（如：0.1.1 → 0.2.0）

npm run publish:minor

发布主版本（增加第一位数字）

适用于不兼容的API变更（如：0.1.1 → 1.0.0）

npm run publish:major

每个命令都会自动完成两项任务：

使用npm version命令递增版本号并创建git标签（如果项目使用git）
立即执行npm publish发布新版本到npm仓库

📝 注意事项

此组件库基于 Vue 2.6.x 和 Ant Design Vue 1.5.0 开发，使用时请确保版本匹配
如需自定义主题，请参考 Ant Design Vue 的主题定制文档
在使用 TypeScript 项目中，可能需要添加相应的类型声明
组件库目前仍在开发中，部分组件可能不稳定

📄 许可证

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目！