jtxxzx-web-components-library

基于 Vue 3 + Vite 的 Web 组件库，提供高质量、易用的基础组件，适用于中后台管理系统和各类 Web 应用。

📦 安装

npm install jtxxzx-web-components-library
# 或
yarn add jtxxzx-web-components-library
# 或
pnpm add jtxxzx-web-components-library

依赖要求

• Vue >= 3.5.24
• Ant Design Vue >= 4.2.6（已内置，无需单独安装）

✨ 特性

• 🚀 开箱即用 - 提供高质量、易用的基础组件
• 🎨 Ant Design Vue - 基于 antd 4.x，样式统一美观
• 🔧 按需引入 - 支持 Tree Shaking，按需加载组件
• 🌐 TypeScript - 完整的 TypeScript 类型定义
• 📱 响应式 - 完美适配各种屏幕尺寸
• 🎯 灵活配置 - 提供丰富的 API 和事件回调
• 🛠️ Vite 构建 - 快速的开发体验和构建速度

📚 组件列表

基础组件

| 组件名 | 说明 | 版本 | | -------------- | ----------------- | ---- | | ToolTipView | 工具提示组件 | ✅ | | UploadBatch | 批量上传组件 | ✅ | | MarkdownViewer | Markdown 渲染组件 | ✅ | | CodeBlock | 代码块组件 | ✅ | | Html2pdfRender | HTML 转 PDF 组件 | ✅ |

🔨 使用方式

全局注册

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import WebComponentsLibrary from 'jtxxzx-web-components-library'
import 'jtxxzx-web-components-library/dist/style.css'

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

按需引入

<template>
  <view>
    <!-- 工具提示 -->
    <ToolTipView content="提示信息">
      <a-button>Hover Me</a-button>
    </ToolTipView>

    <!-- 批量上传 -->
    <UploadBatch v-model:file-list="fileList" :upload-api-method="uploadApi" />

    <!-- Markdown 渲染 -->
    <MarkdownViewer :source="markdownContent" />

    <!-- 代码块 -->
    <CodeBlock language="javascript" :code="codeString" />

    <!-- HTML 转 PDF -->
    <Html2pdfRender ref="pdfRef" />
  </view>
</template>

<script setup>
import {
  ToolTipView,
  UploadBatch,
  MarkdownViewer,
  CodeBlock,
  Html2pdfRender,
} from 'jtxxzx-web-components-library'

// 引入样式（可选，已在全局注册时引入）
import 'jtxxzx-web-components-library/dist/style.css'

import { ref } from 'vue'

const fileList = ref([])
const markdownContent = ref('# Hello World')
const codeString = ref('console.log("Hello")')
const pdfRef = ref(null)

const uploadApi = async ({ file }) => {
  // 实现上传逻辑
  return { data: { url: '...' } }
}
</script>

🎨 组件示例

ToolTipView - 工具提示

简洁的工具提示组件，支持自定义内容和位置。

<template>
  <ToolTipView content="这是提示信息" placement="top" trigger="hover">
    <a-button>悬停显示提示</a-button>
  </ToolTipView>
</template>

API 参数：

• content (string): 提示内容
• placement (string): 弹出位置，可选 top | bottom | left | right
• trigger (string): 触发方式，可选 hover | click

UploadBatch - 批量上传

支持拖拽、粘贴截图的批量文件上传组件。

<template>
  <UploadBatch
    v-model:file-list="fileList"
    :upload-api-method="uploadApi"
    allow-file-type="image"
    @result="handleResult"
  />
</template>

<script setup>
import { ref } from 'vue'

const fileList = ref([])

const uploadApi = async ({ file }) => {
  const formData = new FormData()
  formData.append('file', file)

  const res = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  })

  return await res.json()
}

const handleResult = (files) => {
  console.log('上传结果:', files)
}
</script>

API 参数：

• file-list (array): 文件列表
• upload-api-method (function): 上传 API 方法
• allow-file-type (string): 允许的文件类型，可选 image | all | custom
• file-extensions (array): 自定义允许的扩展名

MarkdownViewer - Markdown 渲染

渲染 Markdown 文本，支持代码高亮。

<template>
  <MarkdownViewer :source="markdownContent" theme="light" />
</template>

<script setup>
import { ref } from 'vue'

const markdownContent = ref(`
# 标题

这是一段 Markdown 内容

\`\`\`javascript
console.log('Hello World')
\`\`\`
`)
</script>

CodeBlock - 代码块

独立的代码块组件，支持语法高亮和复制。

<template>
  <CodeBlock language="javascript" :code="codeString" show-copy />
</template>

<script setup>
const codeString = `
function hello() {
  console.log('Hello World')
}
`
</script>

Html2pdfRender - HTML 转 PDF

将 HTML 内容转换为 PDF 文件并下载。

<template>
  <div>
    <div ref="contentRef">
      <h1>要转换的内容</h1>
      <p>这是将要转为 PDF 的内容</p>
    </div>

    <a-button @click="downloadPdf">下载 PDF</a-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Html2pdfRender } from 'jtxxzx-web-components-library'

const contentRef = ref(null)
const pdfRender = new Html2pdfRender()

const downloadPdf = async () => {
  await pdfRender.download({
    element: contentRef.value,
    filename: 'document.pdf',
    options: {
      margin: 10,
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    },
  })
}
</script>

⚙️ API 文档

详细 API 文档请参考：

• ToolTipView 组件文档
• UploadBatch 组件文档
• MarkdownViewer 组件文档
• CodeBlock 组件文档
• Html2pdfRender 组件文档

🎯 兼容性

支持的浏览器

• ✅ Chrome (最新)
• ✅ Firefox (最新)
• ✅ Safari (最新)
• ✅ Edge (最新)

依赖要求

• Vue >= 3.5.24
• Ant Design Vue >= 4.2.6（已打包进库）

📝 注意事项

1. 样式引入：确保在使用组件前引入样式文件

   import 'jtxxzx-web-components-library/dist/style.css'

2. Ant Design Vue：组件库已内置 antd，无需在项目中重复安装

3. 版本管理：建议锁定版本号，避免升级导致的不兼容

   {
     "dependencies": {
       "jtxxzx-web-components-library": "1.0.2"
     }
   }

4. TypeScript 支持：库已包含完整的类型声明，可直接使用

🐛 问题反馈

如果遇到问题或有建议，欢迎：

• 提交 Issue
• 发起 Discussion
• 联系维护者

📄 License

MIT License

注意：本文档中的预览图片和详细链接待补充，请后续完善以下内容：

• [ ] 组件预览截图/GIF
• [ ] 在线演示链接
• [ ] 完整 API 文档链接
• [ ] 更新日志链接
• [ ] 贡献指南链接