TF Components

TF Components是一个基于Vue 3的组件库，提供丰富、易用的UI组件，帮助开发者快速构建现代化的Web应用。

特性

• 📦 丰富组件 - 提供多种常用UI组件，包括按钮、选择器、表格、树形控件、虚拟键盘和图标等
• 🎨 可定制 - 支持自定义主题和样式，适应不同的设计需求
• 💪 TypeScript - 全面支持TypeScript，提供完整的类型定义
• 🔍 文档完善 - 提供详细的API文档和示例代码
• 🚀 高性能 - 优化的性能，流畅的用户体验
• 🌈 图标支持 - 支持Font Awesome图标和SVG图标

安装

# 使用npm
npm install tf-comps

# 使用yarn
yarn add tf-comps

# 使用pnpm
pnpm add tf-comps

使用方法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import TfComps from 'tf-comps'
import 'tf-comps/style' // 导入样式

// 导入Font Awesome图标（如果需要使用Font Awesome图标）
import '@fortawesome/fontawesome-free/css/all.css'

const app = createApp(App)
app.use(TfComps) // 全局注册所有组件
app.mount('#app')

按需导入

import { TfButton } from 'tf-comps'
import 'tf-comps/style' // 导入样式

TfIcon组件使用指南

TfIcon组件支持两种图标类型：Font Awesome图标和SVG图标。

使用Font Awesome图标

首先需要安装并导入Font Awesome：

npm install @fortawesome/fontawesome-free

// 在入口文件中导入Font Awesome样式
import '@fortawesome/fontawesome-free/css/all.css'

然后在组件中使用：

<template>
  <tf-icon name="fas fa-home" size="24px" color="#3eafff" />
  <tf-icon name="fas fa-star" size="32px" color="gold" />
</template>

使用SVG图标

组件库内置了常用的SVG图标，可以直接使用：

<template>
  <!-- 使用内置SVG图标 - 注意使用:svgPath绑定布尔值true -->
  <tf-icon name="home.svg" :svgPath="true" size="24px" />
  <tf-icon name="delete.svg" :svgPath="true" size="24px" />
</template>

也可以使用自定义路径的SVG图标：

<template>
  <!-- 使用自定义路径 - 提供完整路径 -->
  <tf-icon name="custom-icon" :svgPath="'/icons/custom-icon.svg'" size="24px" />
  
  <!-- 使用绝对URL -->
  <tf-icon name="external-icon" :svgPath="'https://example.com/icons/icon.svg'" size="24px" />
</template>

TfIcon属性

| 属性名 | 类型 | 默认值 | 说明 | |------------|------------------|--------------|---------------------------------------------| | name | string | 必填 | 图标名称，可以是Font Awesome类名或SVG文件名 | | size | string | '24px' | 图标大小 | | color | string | 'currentColor'| 图标颜色 (对SVG图标可能无效，取决于SVG自身定义)| | rotate | number | 0 | 旋转角度，单位为度 | | svgPath | boolean/string | false | 当为true时使用内置SVG，当为字符串时作为自定义路径| | customClass| string | '' | 自定义类名 | | disabled | boolean | false | 是否禁用 | | title | string | '' | 悬停提示文本 |

事件

| 事件名 | 参数 | 说明 | |-------|------------------|---------------------| | click | (event: MouseEvent) | 点击图标时触发 |

注意事项

1. 使用SVG图标时，:svgPath="true" 和 svgPath="true" 是不同的：

   • :svgPath="true" 绑定布尔值true（正确）
   • svgPath="true" 绑定字符串"true"（错误）

2. 组件库内置了常用SVG图标，但如需使用自定义图标，建议将其放置在项目的public/icons目录下。

3. SVG图标颜色通常保留其原始颜色，color属性对SVG图标可能无效。

支持的组件

• TfButton - 按钮组件，支持多种类型、大小和状态
• TfSelect - 选择器组件，支持单选、多选和自定义选项
• TfTable - 表格组件，支持排序、筛选和自定义列
• TfTree - 树形控件，支持展开/折叠、选择和自定义节点
• TfKeyboard - 虚拟键盘组件，支持多种布局和输入模式
• TfIcon - 图标组件，支持Font Awesome图标和SVG图标

SVG图标使用指南

TfIcon组件支持SVG图标，有多种使用方式：

方式一：使用组件库内置图标

<TfIcon name="home.svg" svgPath="true" />

方式二：提供完整的SVG图标路径

<TfIcon name="custom-icon.svg" svgPath="/assets/icons/custom-icon.svg" />

方式三：在项目中添加SVG图标

为了确保SVG图标能够正确加载，您可以：

1. 创建 public/icons 目录，并将您的SVG图标文件放置其中
2. 使用相对路径引用图标：<TfIcon name="your-icon.svg" svgPath="true" />

图标路径说明

组件会按以下顺序尝试加载SVG图标：

1. 使用基于 BASE_URL 的路径 (例如 /your-base-url/icons/icon.svg)
2. 尝试相对路径 (./icons/icon.svg)
3. 尝试从node_modules加载 (./node_modules/tf-comps/lib-dist/icons/icon.svg)

文档

每个组件都提供了详细的文档，包括：

• 基本用法
• API参考
• 示例代码
• 类型定义

查看每个组件文件夹下的README.md获取详细文档。

开发

# 克隆仓库
git clone https://github.com/your-username/tf-comps.git

# 安装依赖
npm install

# 启动Storybook开发环境
npm run storybook

# 构建组件库
npm run build-lib

贡献

欢迎提交问题和功能请求，一起改进这个组件库！

许可证

MIT