props.ts 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /* eslint-disable @typescript-eslint/no-unused-vars */
  2. import type { CSSProperties } from 'vue'
  3. import type { UploadItem } from './types'
  4. import type { ProgressProps } from 'element-plus'
  5. export const imageUploadProps = {
  6. // 已上传列表
  7. modelValue: {
  8. type: Array as PropType<UploadItem[]>,
  9. required: true
  10. },
  11. // 是否自动上传
  12. autoUpload: {
  13. type: Boolean,
  14. default: true
  15. },
  16. // 是否启用拖拽上传
  17. drag: Boolean,
  18. // 是否只读
  19. readonly: Boolean,
  20. // 是否禁用
  21. disabled: Boolean,
  22. // 是否点击预览
  23. preview: {
  24. type: Boolean,
  25. default: true
  26. },
  27. // 可上传数量
  28. limit: {
  29. type: Number,
  30. default: 5
  31. },
  32. // 是否支持多选
  33. multiple: {
  34. type: Boolean,
  35. default: false
  36. },
  37. // 上传类型
  38. accept: {
  39. type: String,
  40. default: 'image/png,image/jpeg'
  41. },
  42. // 文件大小限制(MB)
  43. fileSize: {
  44. type: Number,
  45. default: 1024 * 5
  46. },
  47. // item 样式
  48. itemStyle: Object as PropType<string | CSSProperties>,
  49. // 上传按钮样式
  50. buttonStyle: Object as PropType<string | CSSProperties>,
  51. // 上传进度条配置
  52. progressProps: Object as PropType<ProgressProps>,
  53. // 上传方法 // ToDo: 上传是否可以使用utils 中的 oss 上传方法
  54. uploadFunction: {
  55. type: Function as PropType<(file: any) => Promise<any>>,
  56. required: true
  57. }
  58. }
  59. export type ImageUploadProps = ExtractPropTypes<typeof imageUploadProps>
  60. /* 事件 */
  61. export const imageUploadEmits = {
  62. // 上传事件
  63. upload: (_value: UploadItem) => true,
  64. // 单个删除事件
  65. remove: (_value: UploadItem) => true,
  66. // 修改modelValue
  67. 'update:modelValue': (_value: UploadItem[]) => true
  68. }