jtxxzx-app-components-library

基于 Vue 3 + uni-app 的移动端组件库，提供常用组件用于快速开发跨平台应用。

📦 安装

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

⚠️ 重要：需要安装 peerDependencies

组件库依赖以下包，必须在使用者项目中安装：

# 安装 uview-plus（必需）
npm install uview-plus@^3.3.6

依赖要求

• Vue >= 3.5.13
• uni-app >= 3.0.0
• uview-plus >= 3.3.6 （必需，组件库使用了 up-tooltip、up-table 等组件）

✨ 特性

• 🚀 开箱即用 - 提供高质量、易用的基础组件
• 🎨 uni-app 生态 - 完美支持 uni-app 跨平台框架
• 📱 多端兼容 - 支持 H5、小程序、App 等多端运行
• 🔧 按需引入 - 支持 Tree Shaking，按需加载组件
• 🌐 TypeScript - 完整的 TypeScript 类型定义
• 🎯 灵活配置 - 提供丰富的 API 和事件回调

📚 组件列表

基础组件

| 组件名 | 说明 | 版本 | | ---------------- | ----------------- | ---- | | CopyTextBox | 可复制文本框组件 | ✅ | | TableView | 表格视图组件 | ✅ | | DragonDragButton | 拖拽按钮组件 | ✅ | | PopupSelect | 弹窗选择器组件 | ✅ | | UaMarkdown | Markdown 渲染组件 | ✅ |

🔨 使用方式

全局注册

⚠️ 重要：必须手动引入样式文件，否则组件样式不会生效！

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import AppComponentsLibrary from "jtxxzx-app-components-library";
// ⚠️ 必须引入样式
import "jtxxzx-app-components-library/dist/style.css";

const app = createApp(App);
app.use(AppComponentsLibrary);
app.mount("#app");

uni-app 项目特别说明

如果你在使用的是 uni-app 项目（HBuilderX 创建），需要在 App.vue 或 main.js 中引入样式：

方式一：在 App.vue 的 style 标签中引入

<!-- App.vue -->
<template>
    <view>
        <router-view />
    </view>
</template>

<script>
export default {
    onLaunch: function () {
        console.log("App Launch");
    },
};
</script>

<style lang="scss">
/* 引入组件库样式 */
@import "jtxxzx-app-components-library/dist/style.css";
</style>

方式二：在 manifest.json 中配置

{
    "mp-weixin": {
        "styleIsolation": "global"
    }
}

方式三：在 uni.scss 中引入

// uni.scss
@import "jtxxzx-app-components-library/dist/style.css";

按需引入

<template>
    <view>
        <!-- 复制文本框 -->
        <CopyTextBox :text="content" />

        <!-- 表格视图 -->
        <TableView :data="tableData" />

        <!-- 拖拽按钮 -->
        <DragonDragButton @drag="handleDrag" />

        <!-- 弹窗选择器 -->
        <PopupSelect :options="options" @select="handleSelect" />

        <!-- Markdown 渲染 -->
        <UaMarkdown :source="markdownContent" />
    </view>
</template>

<script setup>
import {
  CopyTextBox,
  TableView,
  DragonDragButton,
  PopupSelect,
  UaMarkdown
} from 'jtxxzx-app-components-library'

// ⚠️ 必须引入样式
import 'jtxxzx-app-components-library/dist/style.css'

const content = '这是可复制的文本'
const tableData = [...]
const options = [...]
const markdownContent = '# Hello World'

const handleDrag = (data) => {
  console.log('拖拽数据:', data)
}

const handleSelect = (selected) => {
  console.log('选中项:', selected)
}
</script>

🎨 组件示例

CopyTextBox - 可复制文本框

一键复制文本内容，支持自定义提示。

<template>
    <CopyTextBox text="需要复制的内容" tip-text="复制成功" @copy="handleCopy" />
</template>

TableView - 表格视图

展示表格数据，支持自定义列样式。

<template>
    <TableView :columns="columns" :data="tableData" :row-height="50" />
</template>

DragonDragButton - 拖拽按钮

支持拖拽操作的按钮组件。

<template>
    <DragonDragButton
        :position="buttonPosition"
        @drag="handleDrag"
        @click="handleClick"
    />
</template>

PopupSelect - 弹窗选择器

弹出式选择器，支持单选/多选。

<template>
    <PopupSelect
        v-model="selectedValue"
        :options="options"
        :multiple="false"
        title="请选择"
        @confirm="handleConfirm"
    />
</template>

UaMarkdown - Markdown 渲染

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

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

⚙️ API 文档

详细 API 文档请参考：

• CopyTextBox 组件文档
• TableView 组件文档
• DragonDragButton 组件文档
• PopupSelect 组件文档
• UaMarkdown 组件文档

🎯 兼容性

支持的平台

• ✅ H5
• ✅ 微信小程序
• ✅ 支付宝小程序
• ✅ 百度小程序
• ✅ 头条小程序
• ✅ QQ 小程序
• ✅ 快手小程序
• ✅ App（iOS/Android）
• ✅ HarmonyOS

依赖要求

• Vue >= 3.5.13
• uni-app >= 3.0.0

📝 注意事项

1. 必须安装 uview-plus

⚠️ 重要：组件库依赖 uview-plus，必须在使用者项目中安装并配置！

# 安装 uview-plus
npm install uview-plus@^3.3.6

然后在 main.js 或 main.ts 中注册 uview-plus：

// main.js
import { createSSRApp } from "vue";
import App from "./App.vue";
// 引入 uview-plus
import uviewPlus from "uview-plus";
// 引入 uview-plus 样式
import "uview-plus/index.scss";

const app = createSSRApp(App);

// 使用 uview-plus
app.use(uviewPlus);

// 使用组件库
import AppComponentsLibrary from "jtxxzx-app-components-library";
import "jtxxzx-app-components-library/dist/style.css";
app.use(AppComponentsLibrary);

app.mount("#app");

uni-app 项目特别配置：

在 uni.scss 或 pages.json 中配置 easycom 模式，让 uview-plus 组件自动识别：

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"
    }
  }
}

2. 样式必须手动引入

组件库的样式需要手动引入：

// 方式一：在 main.js 中全局引入
import 'jtxxzx-app-components-library/dist/style.css'

// 方式二：在 App.vue 的 style 标签中引入
@import 'jtxxzx-app-components-library/dist/style.css';

// 方式三：在 uni.scss 中引入（推荐 uni-app 项目使用）
@import 'jtxxzx-app-components-library/dist/style.css';

如果忘记引入样式，组件会显示但没有任何样式！

2. uni-app 环境

部分组件依赖 uni API（如 uni.setClipboardData、uni.showToast），请在 uni-app 项目中使用。

3. 版本管理

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

{
    "dependencies": {
        "jtxxzx-app-components-library": "1.0.0"
    }
}

4. scoped 样式说明

组件使用 scoped 样式（带 data-v-xxx 属性），这是 uni-app 的标准做法。如果你的项目中样式不生效，请检查：

• ✅ 是否正确引入了 style.css
• ✅ 是否有 CSS 冲突或覆盖
• ✅ 小程序端是否需要配置 styleIsolation: "global"

🐛 问题反馈

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

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

📄 License

MIT License

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

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