国际化图片组件★

使用说明

以 水印配置页面为例：

1. 页面开发

• 模板使用

<!-- vue template -->
<hos-row :gutter="20">
  <hos-col :span="12">
    <hos-form-item :label="$t('图片')">
      <upload-img 
        :imgConfig="form.imgConfig"
        @updateImgConfig="updateImgConfig"
        :disabled="!form.activity"
      ></upload-img>
    </hos-form-item>
  </hos-col>
</hos-row>

• script中使用

import uploadImg from '@base/components/uploadImg/index.vue'

components: {
  uploadImg
},

methods: {
  updateImgConfig(arr) {
    // 该arr是保存给后端的图片配置数组，上传图片以后会动态更改
    this.form.fileId = str
  }
}

可以给组件传递限制上传数量，上传格式，提示信息，数据格式已经按照前后端规定做了统一处理，表单配置中无需修改；

• 组件中定义的参数

props: {
  // 支持自定义提示信息
  uploadMessage: {
    type: String,
    default: '只能上传jpg/png文件，且不超过500kb'
  },
  // 支持自定义上传类型限制
  uploadLimitType: {
    type: String,
    default: 'jpg,png'
  },
  // 限制文件数量
  uploadLimitNumber: {
    type: Number,
    default: 1
  },
  // 给组件传递的数据回显
  imgConfig: {
    type: Array,
    default: []
  },
  // 禁用状态
  disabled: {
    type: Boolean,
    default: false
  }
},