Vue Components Tools

一个基于 Vue 3 的实用组件库：是一个简单而实用的 vue3 组件库，包含一些常用的组件，如按钮、输入框、选择框、弹窗、分页、表格等等。

English | 简体中文

安装

npm install vue-components-tools

特性

• 🚀 高性能虚拟滚动 - 轻松渲染多条数据，保持流畅的滚动体验
• 🔄 动态高度适配 - 自动处理超大数据集，防止DOM高度溢出
• 🎯 简单易用API - 直观的接口设计，快速集成到任何项目
• 📦 轻量级 - 无依赖，体积小，加载快
• 🔧 高度可定制 - 支持自定义渲染函数，满足各种UI需求
• 💪 双版本支持 - 同时支持 TypeScript 和 JavaScript 版本

使用

全局引入

TypeScript 版本

import { createApp } from 'vue'
import App from './App.vue'
import VueComponentsTools from 'vue-components-tools'

const app = createApp(App)
app.use(VueComponentsTools)
app.mount('#app')

JavaScript 版本

import { createApp } from 'vue'
import App from './App.vue'
import VueComponentsTools from 'vue-components-tools/dist/vue-components-tools.es.js'

const app = createApp(App)
app.use(VueComponentsTools)
app.mount('#app')

按需引入

TypeScript 版本

import { createApp } from 'vue'
import App from './App.vue'
import { Button } from 'vue-components-tools'

const app = createApp(App)
app.use(Button)
app.mount('#app')

JavaScript 版本

import { createApp } from 'vue'
import App from './App.vue'
import { Button } from 'vue-components-tools/dist/vue-components-tools.es.js'

const app = createApp(App)
app.use(Button)
app.mount('#app')

组件

Button 按钮

基础按钮组件，支持多种类型和尺寸。

<template>
  <v-button type="primary" size="medium" @click="handleClick">
    点击按钮
  </v-button>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击')
}
</script>

功能列表

按钮类型

• default: 默认按钮
• primary: 主按钮
• success: 成功按钮
• warning: 警告按钮
• danger: 危险按钮

按钮尺寸

• small: 小尺寸按钮
• medium: 中等尺寸按钮
• large: 大尺寸按钮钮

属性

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | |---------|---------|---------|-------------------------------------------|---------| | type | 按钮类型 | string | default / primary / success / warning / danger | default | | size | 按钮尺寸 | string | small / medium / large | medium | | disabled| 是否禁用 | boolean | - | false |

事件

| 事件名 | 说明 | 回调参数 | |--------|---------------|-------------| | click | 点击按钮时触发 | MouseEvent |

🛠️CDN

<!-- 生产环境（压缩版） -->
<script src="https://unpkg.com/[email protected]/dist/vue-components-tools.umd.min.js"></script>

<!-- 开发环境（未压缩） -->
<script src="https://unpkg.com/[email protected]/dist/vue-components-tools.umd.js"></script>

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

🤝贡献指南

欢迎对这个项目进行贡献！请遵循以下步骤：

1. Fork 本仓库。
2. 创建新分支 (git checkout -b feature/your-feature)。
3. 提交更改 (git commit -m 'Add some feature')。
4. 推送分支 (git push origin feature/your-feature)。
5. 提交 Pull Request。

• 🎯 欢迎访问我的技术博客：- © https://gitee.com/mahmudtjcu
• 🎯 欢迎访问我的Gitee：- © https://www.cnblogs.com/mahmud

📜许可证

本项目使用 MIT 许可证。