帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

vue 图片压缩上传组件(handyUploader)

帝国模板之家 2020-12-30 网页特效 评论

描述:

一个简单但功能丰富的文件上传组件,带有Vue.js图片压缩组件。

使用方法

1.导入并注册Handy Uploader。

import handyUploader from 'handy-uploader/src/components/handyUploader';
export default {
  components: {
    handyUploader,
  },
}

2. 将Handy Uploader组件添加到应用程序模板。

<handy-uploader
  :documentAttachment.sync="handyAttachments"
  :fileUploaderType= "'simple'"
>
</handy-uploader>

3. 组件配置项。

/**
 * Array contain files
 */
documentAttachment: [Array],
/**
 * Send api url for 'add' and 'delete'.
 * f.e: /building/add or /building/delete
 */
maxFileSize: {
  type: Number,
  default: 5120,
},
/**
 * choose File Uploader Type
 */
fileUploaderType: {
  type: String,
  default: 'thumbnail'
},
/**
 * Maximum file Upload
 */
maxFileCount: {
  type: Number,
  default: 0
},
/**
 * choose File Uploader Card Type
 */
cardType: String,
/**
 * Badge file counter state
 */
badgeCounter: {
  type: Boolean,
  default: true
},
/**
 * change Button Color
 */
btnColor: {
  type: String,
  default: 'info'
},
/**
 * Enable / Disable image compressor
 */
imageCompressor: Boolean,
/**
 * Image compress level (0 to 1)
 */
imageCompressLevel: {
  type: Number,
  default: 0.5
},
/**
 * Accept uploaded files
 */
fileAccept: String,
/**
 * show / hidden thumb for images in table and simple file uploader
 */
thumb: {
  type: Boolean,
  default: true
},
/**
 * show / hidden thumb column in table file uploader
 */
tableThumbColumn: Boolean,
/**
 * enable / disable table fixed header
 */
tableFixedHeader: {
  type: Boolean,
  default: true
},
/**
 * set table height
 */
tableHeight: {
  type: Number,
  default: 400
},
/**
 * Enable RTL support languages
 */
rtlSupport: {
  type: Boolean,
  default: false
},
/**
 * Change file uploader languages
 */
lang: {
  type: String,
  default: 'en'
},
/**
 * Change file Name before upload
 */
changeFileName: {
  type: Boolean,
  default: false
},
/**
 * Add file Description before upload
 */
addFileDescription: {
  type: Boolean,
  default: false
},
/**
 * Add file tags before upload
 */
addFileTag: {
  type: Boolean,
  default: false
},
/**
 * Array of file tags
 */
tags: {
  type: Array,
},
/**
 * Change count of columns
 */
cols: {
  type: Number,
  default: 4
},
/**
 * Define Custom language for uploader
 */
customLang: {
  type: Object,
  default: null
},
/**
 * Set Insert/Add new file Permission
 */
insertPermission: {
  type: Boolean,
  default: true
},
/**
 * Set edit Permission
 */
editPermission: {
  type: Boolean,
  default: true
},
/**
 * Set delete Permission
 */
deletePermission: {
  type: Boolean,
  default: true
},
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言