新印科技公共组件

安装

npm install xinyin_common -S

公共组件列表

1. single-upload 单文件上传

single-upload 参数列表

• value String 图片 URL
• name String 文件名称
• disabled boolean 是否可编辑
• tips String 图片文件提示信息
• fileSize 数组 大小限制 默认： [10, 'mb']，支持 kb： [300, 'kb']
• fileType 数组 类型限制 默认：['jpeg', 'jpg', 'png']

事件回调

• input String 图片 url

案例

<single-upload v-model="url" name="file.png" />

2. upload-file 多文件上传

upload-file 参数列表

• limit number 数量限制 默认：1
• fileType array 文件类型限制 默认：[]，支持文件范围：['doc', 'docx', 'xls', 'xlsx', 'pdf', 'PDF', 'jpg', 'eml', 'mp4']
• btnText array 上传按钮显示的文字 默认：['选取文件', '上传']
• loadingText String 上传中文字显示 默认：处理中...
• fileSize array 文件大小限制 默认：[5,'mb']，支持 mb 和 kb：[300, 'kb']
• listType String 图片展示方式 默认：picture，枚举值：text,picture,picture-card
• initFileList array 初始文件列表，默认:[]， 写法参考：[{name:'file.png',url:'xxx',type:'png'}]

事件回调

• removeFile 参数：index 文件在 fileList 中的索引位置
• uploadSuccess 参数：fileList 返回多个图片集合数组

案例

 <upload-file :limit="1" :file-size="fileSizePicture" :file-type="fileTypePicture" :btn-text="btnTextPicture" :list-type="listTypePicture" :init-file-list="fileList" :loading-text="loadingTextPicture" :name="'file-name'" @removeFile="removeFile" @uploadSuccess="uploadSuccess" />

3. link-upload 链接文件上传

link-upload 参数列表

• fileType array 文件类型 默认：['png', 'jpeg', 'jpg', 'gif']
• fileSize array 文件大小限制 默认：[10,'mb']，支持 kb

事件回调

• uploadSuccess 参数：url 上传成功后的图片 url

案例

<link-upload @uploadSuccess="avatarUpload" />

4. button-upload 按钮上传

button-upload 参数列表

• visibleFileList Boolean 是否显示上传的文件列表，只支持单文件
• text String 上传按钮显示文字 默认：上传附件
• flag Object 回传对象 默认 null
• fileType Array 支持的文件类型 默认： ['doc', 'docx', 'pdf']
• fileSize Array 文件限制大小 [10, 'mb']或者[100, 'kb'] 默认：[10, 'mb']
• target String 文件功能类型 'ali'、'aliFixed'、'yzxAli'、'drive'
• fullPath String 文件上传完整路径，带文件名
• cssStyle Object 按钮样式
• multiple Boolean 是否多传
• policy Object 阿里云 policy
• isBackName Boolean 是否回传文件名