更新记录

1.0.2（2025-03-17） 下载此版本

• co-area-picker/co-dictionary-picker 组件新增加载状态
• co-popup 组件新增边框阴影

1.0.1（2025-03-12） 下载此版本

• 更新说明文档

1.0.0（2025-03-06） 下载此版本

• 新增 co-svg-icon 组件
• 新增 co-button 组件
• 新增 co-tag 组件
• 新增 co-form 组件
• 新增 co-tree 组件
• 新增 co-collapse 组件
• 新增 co-load 组件
• 新增 co-popup 组件
• 新增 co-search 组件
• 新增 co-footer 组件
• 新增 co-step 组件
• 新增 co-select-page 组件
• 新增 co-menu 组件
• 新增 co-alert 组件

平台兼容性

Config UI

可动态配置的UI组件库

[TOC]

说明

config UI，是以配置驱动的UI组件库，涵盖常用的组件，通过简单的配置即可生成内容丰富、功能强大的表单。

安装

uni-app插件市场链接 —— https://ext.dcloud.net.cn/plugin?id=22469

引入

在 App.vue 文件引入 scss

<style lang="scss">
@import '@/uni_modules/config-ui/styles/common.scss';
@import '@/uni_modules/config-ui/styles/loading.scss';
</style>

在 main.js 文件进行仓库初始化

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'

import ConfigStore from './uni_modules/config-ui/utils/config-store'

ConfigStore.init({
  dictConfig: {
    labelKey: 'dictName', // 字典值对应的中文名的字段名
    valueKey: 'dictValue', // 字典值的字段名
    getFun: (code) => { // {Function} 获取字典的接口，args: code 字典编码
      return new Promise((resolve, reject) => {
        // mock data
        setTimeout(() => {
          if (code === 'DICT_NAME_CODE') {
            resolve([
              { dictName: '字典项1', dictValue: '1' },
              { dictName: '字典项2', dictValue: '2' },
              { dictName: '字典项3', dictValue: '3' },
              { dictName: '字典项4', dictValue: '4' },
            ])
          }
          else {
            resolve([
              { dictName: '其他', dictValue: '0' },
            ])
          }
        }, 5000)
      })
    },
  },
  uploadConfig: {
    url: '', // 上传接口
    header: {}, // 请求头
    success: ({ res, resolve, reject }) => {}, // {Function} 上传成功后的回调，args: res、resolve、reject，需返回 resolve 或者 reject。
  },
  downloadConfig: {
    header: {}, // HTTP 请求的 Header，Header 中不能设置 Referer
    timeout: 1000 * 60 * 5, // 5分钟
    filePath: '', // 指定文件下载后存储的路径 (本地路径)
    getUrlFun: (fileId) => {}, // {Function} 获取下载路径，args: fileId 文件id，需返回 String 类型 url。
  },
  geoConfig: {
    key: 'code', // 地理信息编码的字段名
    value: 'name', // 地理信息编码对应的中文名的字段名
    getFun: (code) => { // {Function} 获取地理信息接口, args: code 区域编码, args 为空时查全部省份，需返回 Promise.resolve(Array) 类型。
      return new Promise((resolve, reject) => {
        // mock data
        setTimeout(() => {
          if (!code) {
            resolve([
              { code: '110000', name: '北京市' },
              { code: '130000', name: '河北省' },
              { code: '140000', name: '山西省' },
              { code: '150000', name: '内蒙古自治区' },
            ])
          }
          else if (code === '110000') {
            resolve([
              { code: '110100', name: '北京市' },
            ])
          }
          else if (code === '110100') {
            resolve([
              { code: '110101', name: '东城区' },
              { code: '110102', name: '西城区' },
              { code: '110105', name: '朝阳区' },
            ])
          }
          else if (code === '130000') {
            resolve([
              { code: '130100', name: '石家庄市' },
              { code: '130200', name: '唐山市' },
              { code: '130300', name: '秦皇岛市' },
            ])
          }
          else if (code === '130100') {
            resolve([
              { code: '130102', name: '长安区' },
              { code: '130104', name: '桥西区' },
              { code: '130105', name: '新华区' },
            ])
          }
          else {
            resolve([])
          }
        }, 3000);
      })
    },
  },
})

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

使用方法

配置easycom规则后，自动按需引入，无需import组件，直接引用即可。

<template>
    <co-button type="primary">按钮</co-button>
</template>

文档说明

co-form 表单

Attributes

options

options.showConfig

options.showConfig.options

options.rule

options.component

options.showConfig.type

options.showConfig.options.terms

Events

Slots

co-form-label (内置组件)

Attributes

config

config.labelIconList

Events

co-form-normal (内置组件)

Attributes

attrs

attrs.labelType

attrs.borderAlign

attrs.layout

attrs.inputType

Events

co-form-picker (内置组件)

Attributes

attrs

attrs.pickerType

attrs.returnType

Events

co-form-cascader (内置组件)

Attributes

attrs

attrs.returnType

Events

co-form-upload (内置组件)

Attributes

attrs

attrs.uploadType

Events

co-form-check-button (内置组件)

Attributes

attrs

attrs.type

Events

co-svg-icon 图标

Attributes

Events

co-button 按钮

Attributes

type

Events

Slots

co-tag 标签

Attributes

type

effect

Slots

co-alert 提示

Attributes

type

effect

co-menu 菜单弹框

Events

Slots

co-menu-item 菜单项

Attributes

Slots

co-tree 树形控件

Attributes

props

Events

co-popup 弹出框

Attributes

Events

Slots

co-collapse 折叠面板

Attributes

Events

Slots

co-search 搜索

Attributes

Events

Slots

co-footer 底部栏

Attributes

options

Events

Slots

co-load 自动加载

Attributes

Events

Slots

co-select-page 选择页

Attributes

Events

Slots

co-steps 步骤条

Attributes

Slots

co-step 步骤

Attributes

Events

Slots