chengla-web-ui-test v1.18.18
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>
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago