# chengla-web-ui

> 橙啦UI仓库

Latest version **0.3.29** (published 2026-06-01) · 0 weekly downloads

## Install

```sh
npm install chengla-web-ui
pnpm add chengla-web-ui
yarn add chengla-web-ui
bun add chengla-web-ui
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.29 |
| Published | 2026-06-01 |
| First published | 2022-10-19 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 3.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chengla_web, begonia_ |

## Links

- npm: https://www.npmjs.com/package/chengla-web-ui
- Homepage: https://www.npmjs.com/search?q=chengla-web-ui
- npm.io page: https://npm.io/package/chengla-web-ui

## Dependencies (10)

- [qs](https://npm.io/package/qs.md) ^6.11.2
- [nrm](https://npm.io/package/nrm.md) ^1.2.6
- [vue](https://npm.io/package/vue.md) 3.2.45
- [axios](https://npm.io/package/axios.md) ^1.1.3
- [terser](https://npm.io/package/terser.md) ^5.15.1
- [ali-oss](https://npm.io/package/ali-oss.md) ^6.17.1
- [vue-router](https://npm.io/package/vue-router.md) ^4.1.6
- [compressorjs](https://npm.io/package/compressorjs.md) ^1.1.1
- [element-plus](https://npm.io/package/element-plus.md) ^2.3.7
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1

## Recent versions

- 0.3.29 (latest) — 2026-06-01
- 0.3.28 — 2025-10-27
- 0.3.27 — 2025-09-18
- 0.3.26 — 2025-09-08
- 0.3.25 — 2025-09-03
- 0.3.24 — 2025-08-27
- 0.3.23 — 2025-08-20
- 0.3.22 — 2025-07-30
- 0.3.21 — 2025-07-10
- 0.3.20 — 2025-06-04
- 0.3.19 — 2025-05-29
- 0.3.18 — 2025-05-14
- 0.3.17 — 2025-05-07
- 0.3.16 — 2025-02-05
- 0.3.15 — 2024-12-31
- … 54 more at https://npm.io/package/chengla-web-ui/versions

## README

# uploadFileCl uploadFileOSS

## 提示

```
该组件默认为透明，高度和宽度充满父元素，嵌入父元素的标签内即可
```

## 安装

```
npm install chengla-web-ui
```

## 参数描述

```
imgWidth:      type: number|string // 图片的宽 必须和高同时出现
imgHeight:     type: number|string // 图片的高
sliceRange:    type: number, // 切片大小 MB
multiple:      type: Boolean, // 是否多选  默认为false
type:          type: String, // 上传类型 img, text, video 默认为img
clearInput:    type: Number, // 清除input的value 传一个数字即可 +new Date()
uploadBucket:  type: String  上传方式 使用uploadFileCl组件时可不传
uploadPath     type: String, // 上传地址，根据项目命名 例如辅导使用coaching
qualitytype:   Number, // 图片压缩率 它必须是0和1之间的数字  默认为0.7
uploadHost:    type: String, // 上传域名
videoSizeLimit?: number; // 视频的大小限制 M
allowZip: boolean; // 支持zip上传 默认 不支持
imgLimitSize: number; // img最大上传 默认 不限制 单位M
fileLimitLength: number; // 文件最大上传数量 默认10个
videoAllowType: string; // 视频上传格式限制
docAllowType: any|string[]; // 文档上传格式限制
imgAllowType: any|string[]; // 图片上传格式限制
fileSizeLimit?: number; // 视频的大小限制 M 默认5M
zipSizeLimit?: number; // zip的大小限制 M 默认10M
audioLimitSize?: number; // audio的大小限制 M 默认10M
audioLimitDuration?: number; // audio的时长限制 秒 默认60s
audioAllowType?: any|string[]; // audio格式限制
is2X?: boolean; // 是否是2倍图 默认false 2倍图不限制具体宽高 是整数倍即可

```

## 使用

```
<template>
  <div id="app">
    <uploadFileOSS @fileMsg="fileMsg" uploadBucket="oss"></uploadFileOSS>
  </div>
</template>

<script>
import uploadFileOSS from 'chengla-web-ui'
export default {
    components: { uploadFileOSS },
    data() {
        return {
            fileList: []
        }
    },
    methods: {
        fileMsg(data) {
            console.log(data)
            if (data.code == 200) {
                this.fileList = data.info;
            } else {
                alert(data.msg)
            }
        }
    }
}
<script>
```

# configMessage 消息配置

## 参数描述

```
  messageType: any              // 支持的消息类型，默认text文本，image-图片 video-视频 file-文件 link-链接  card-卡片 audio-音频
  messageTypeShowIcon?: boolean // 消息类型展示icon 图标
  showTimeSetting?: boolean     // 是否显示间隔时间配置 默认true
  textVariables?: any           // 文本变量数组， 默认nickName-微信昵称 groupUser-入群用户 all-@所有人 staffNikeName-销售昵称 motto-座右铭 fulfilled-成就感话术
  handleBtnShow?: boolean       // 是否显示操作按钮  默认true
  messageData?: any             // 已添加的数据 回显
  maxLimit?: number             // 添加消息最大条数限制 默认5条
  textMaxLenght?: number        // 文本输入长度限制  默认500字
  uoloadHost?: string           // 上传配置地址 默认https://t-docs.orangevip.com
  uploadBucket?: string         // 上传方式 默认chengla 搭配 bucketNoExpire 使用
  uploadPath?: string           // 上传地址，根据项目区分 默认 wechat/msg
  isEnterpriseWeChat?: boolean  // 1.是否是企微官方  默认false
  apiHost?: string              // 2.接口域名
  apiUrl?: any                  // 3.接口地址 [{name:path,name:path}]
  bucketNoExpire?: boolean      // 4.接口入参bucket 资源是否存档 默认false
  inputDisable?: boolean        // 配置时间不可编辑
  timeFlag?: number             // 配置时间类型

  imgLimitSize?: number         // img最大上传 默认 不限制 单位M
  imgMaxWidth?: number          // img最大width 默认0
  imgMinWidth?: number          // img最小width 默认0
  imgHeight?: number            // img height 默认0
  imgWidth?: number             // img width 默认0
  imgMultiple?: boolean         // img 是否多选 默认false
  imgAllowType?: any            // 图片上传格式限制

  fileLimitLength?: number      // 文件最大上传数量 默认10个
  fileSizeLimit?: number        // 文件的大小限制 M 默认5M
  docAllowType?: any            // 文档上传格式限制
  zipSizeLimit?: number         // zip的大小限制 M 默认10M

  videoSizeLimit?: number       // 视频的大小限制 M 默认10M
  videoAllowType?: any          // 视频上传格式限制

  audioLimitSize?: number       // audio的大小限制 M 默认10M
  audioLimitDuration?: number   // audio的时长限制 秒 默认60s
  audioAllowType?: any          // audio格式限制
  platform?: string             // 运行环境 qw企微

```

## 使用

```
<template>
  <div id="app">
    <configMessage
      :handle-btn-show="true"
      :message-data="formSendDetailList"
      :show-time-setting="true"
      :max-limit="5"
      :text-max-lenght="30"
      :api-host="apiHost"
      :api-url="apiUrl"
      :bucket-noExpire="true"
      @configMessageData="configMessageData"
    />
  </div>
</template>

<script>
import configMessage from 'chengla-web-ui'
const apiHost = "XXX"
const apiUrl = {
  "aaa": "/aaa",
  "bbb": "/bbb",
}
interface MessageItem {
  annex_id?: number
  type: number // 消息类型 1文本 2图片 3视频 4文件 5链接 6名片 7音频
  file_path: string //消息路径
  file: File //消息文件
  file_name: string //文件名称
  file_size: number //文件大小
  file_type: string //文件类型/后缀名
  interval?: number //发送时间间隔
  unit?: string // 时间类型 s-秒、m-分
}
const formSendDetailList = ref([])
const configMessageData = (data: Array<MessageItem>) => {
  console.log(data)
}
<script>
```

---
_Source: https://npm.io/package/chengla-web-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._