ct-uniapp

A UI component library for uni-app with excellent mini-program compatibility.

🚀 推荐使用方式：easycom 自动导入

基于小程序环境的充分测试，强烈推荐使用 easycom 方式，具有最佳的兼容性。

安装

npm install ct-uniapp

配置 easycom

在 pages.json 中添加：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^KyButton$": "ct-uniapp/button/src/button.vue",
      "^KyForm$": "ct-uniapp/form/src/form.vue",
      "^KyTable$": "ct-uniapp/table/src/table.vue",
      "^KyEditTable$": "ct-uniapp/edit-table/src/editTable.vue",
      "^KySteps$": "ct-uniapp/steps/src/steps.vue"
    }
  }
}

直接使用

<template>
  <!-- 🎉 无需 import，直接使用 -->
  <KyButton type="primary">按钮</KyButton>
  <KyForm v-model="formData" :options="formOptions" />
</template>

📖 详细 easycom 指南： EASYCOM-GUIDE.md

🔄 传统使用方法（备选）

1. 全局注册

在 main.js 中：

import { createApp } from 'vue'
import App from './App.vue'
import ctUniapp from 'ct-uniapp'
import 'ct-uniapp/dist/style.css'

const app = createApp(App)
app.use(ctUniapp)

2. 按需导入

import { KyButton, KyForm, KyTable } from 'ct-uniapp'
import 'ct-uniapp/dist/style.css'

export default {
  components: {
    KyButton,
    KyForm,
    KyTable
  }
}

组件列表

• KyButton - 按钮组件
• KyForm - 表单组件
• KyTable - 表格组件
• KyEditTable - 可编辑表格组件
• KySteps - 步骤条组件

兼容性说明

uni-app 环境兼容性

如果你在 uni-app 项目中遇到以下错误：

"openBlock" is not exported by "node_modules/@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js"

推荐解决方案：使用 uni-app 专用版本

// 使用 uni-app 兼容版本（推荐）
import { KyButton, KyForm, KyTable } from 'ct-uniapp/uniapp'
import 'ct-uniapp/dist/style.css'

// 或者全局注册
import ctUniapp from 'ct-uniapp/uniapp'
app.use(ctUniapp)

备选方案 1：配置 vite.config.js

在你的项目的 vite.config.js 中添加以下配置：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
  optimizeDeps: {
    include: ['ct-uniapp']
  },
  define: {
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false
  }
})

备选方案 2：使用 CommonJS 版本

const ctUniapp = require('ct-uniapp/dist/index.js')

版本差异说明

| 版本 | 导入方式 | 说明 | 适用场景 | |------|----------|------|----------| | 标准版 | import {} from 'ct-uniapp' | 标准 Vue 3 构建版本 | 一般 Vue 3 项目、H5 应用 | | uni-app 版 | import {} from 'ct-uniapp/uniapp' | 包含 Vue API 兼容层 | uni-app 项目（推荐） |

支持的平台

• ✅ H5
• ✅ 微信小程序
• ✅ 支付宝小程序
• ✅ 百度小程序
• ✅ 头条小程序
• ✅ QQ小程序
• ✅ App Plus

示例

KyForm 使用示例

<template>
  <KyForm
    v-model="formData"
    :options="formOptions"
    @submit="onSubmit"
  />
</template>

<script>
import { KyForm } from 'ct-uniapp'

export default {
  components: { KyForm },
  data() {
    return {
      formData: {
        name: '',
        age: 0
      },
      formOptions: [
        {
          name: 'name',
          label: '姓名',
          type: 'input',
          required: true
        },
        {
          name: 'age',
          label: '年龄',
          type: 'input',
          required: true
        }
      ]
    }
  },
  methods: {
    onSubmit(data) {
      console.log('提交的数据:', data)
    }
  }
}
</script>

KyTable 使用示例

<template>
  <KyTable
    :columns="columns"
    :data="tableData"
    :pagination="pagination"
  />
</template>

<script>
import { KyTable } from 'ct-uniapp'

export default {
  components: { KyTable },
  data() {
    return {
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'address', label: '地址' }
      ],
      tableData: [
        { name: '张三', age: 25, address: '北京市' },
        { name: '李四', age: 30, address: '上海市' }
      ],
      pagination: {
        current: 1,
        size: 10,
        total: 100
      }
    }
  }
}
</script>

许可证

MIT