tt-components

TT-Components

基于 Vue 3 和 Ant Design Vue 的高质量 UI 组件库，提供可拖拽模态框、文件预览、数据表格等实用组件。

✨ 特性

• 🚀 基于 Vue 3 Composition API
• 📱 响应式设计，支持移动端
• 🎨 基于 Ant Design Vue 设计语言
• 📦 支持按需加载
• 🌍 支持国际化
• 🔧 完整的 TypeScript 定义文件（即将支持）

📦 安装

# npm
npm install tt-components

# yarn
yarn add tt-components

# pnpm
pnpm add tt-components

🔨 使用

完整引入

import { createApp } from 'vue';
import TTComponents from 'tt-components';
import 'tt-components/dist/style.css';

const app = createApp();
app.use(TTComponents);

按需引入

import { TtDraggableModal, TtPreviewFileModal, TtTable } from 'tt-components';
import 'tt-components/dist/style.css';

export default {
  components: {
    TtDraggableModal,
    TtPreviewFileModal,
    TtTable,
  },
};

📖 组件文档

TtDraggableModal 可拖拽模态框

功能强大的可拖拽模态框基础组件，支持拖拽、调整大小、位置记忆等功能。

基础用法

<template>
  <tt-draggable-modal ref="modalRef" title="示例标题" :width="800">
    <p>模态框内容</p>
  </tt-draggable-modal>
</template>

API

属性 (Props)

方法 (Methods)

TtPreviewFileModal 文件预览模态框

基于 TtDraggableModal 的文件预览组件，支持图片、视频等多种文件格式预览。

基础用法

<template>
  <tt-preview-file-modal ref="previewRef" title="文件预览" :file-list="fileList" />
</template>

<script setup>
  const fileList = [
    { name: '图片1.jpg', url: '/images/1.jpg' },
    { name: '视频1.mp4', url: '/videos/1.mp4' },
  ];
</script>

API

属性 (Props)

方法 (Methods)

TtTable 数据表格

增强版数据表格组件，在 Ant Design Vue Table 基础上添加了全屏、刷新等功能。

基础用法

<template>
  <tt-table :data-source="dataSource" :columns="columns" @refresh="handleRefresh">
    <template #operate>
      <a-button type="primary">新增</a-button>
    </template>
  </tt-table>
</template>

API

属性 (Props)

继承 Ant Design Vue Table 的所有属性，额外支持：

事件 (Events)

插槽 (Slots)

🤝 开发

环境要求

• Node.js >= 16
• pnpm >= 7

本地开发

# 克隆项目
git clone https://github.com/HuareuT/tt-components.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm examples

# 构建组件库
pnpm build

代码规范

# 代码格式化
pnpm format

发布流程

详细的发布流程请查看 发布指南。

快速发布

# 自动化发布（推荐）
pnpm release:publish

# 手动发布
pnpm release:patch  # 补丁版本
pnpm release:minor  # 小版本
pnpm release:major  # 大版本

🤝 贡献

欢迎贡献代码！请查看 贡献指南。

📝 更新日志

详细的更新日志请查看 CHANGELOG.md。

📄 许可证

MIT License © 2024 HuareuT