chengla-web-ui v0.3.7

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格式限制

使用

<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>