ant-design-vue 使用小结

[iiuhuy]

ant-design-vue 使用相关小结

FormModel

• a-form-model-item 使用必填标识时，不能获取 prop，给 a-form-model-item 添加 required

<a-form-model-item
  :label-col="labelCol"
  :wrapper-col="wrapperCol"
  label="名片/工牌"
  style="height: 140px"
  required
>
  <a-upload
    list-type="picture-card"
    class="avatar-uploader"
    :fileList="fileList"
    :before-upload="beforeUpload"
    :customRequest="customRequest"
    @change="uploadChangeHandle"
    @preview="filePreview"
    style="width: 200px"
    :disabled="modifyType !== 'add'"
  >
    <div v-if="!fileList[0]">
      <a-icon type="plus" />
      <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload>
</a-form-model-item>

Upload 组件

• 缩略图显示不清晰；预览的时候不是图片地址，图片格式为 File、Blob 格式，所以前端上传和获取后的文件需要转为 Base64 的格式进行展示。在 preview 回调中将 file 文件转为 Base64。

// 利用 fileReader 的 readAsDataURL，将 blob 转为 base64
export function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.onload = e => {
      resolve(e.target.result)
    }
    // readAsDataURL
    fileReader.readAsDataURL(blob)
    fileReader.onerror = () => {
      reject(new Error('文件流异常'))
    }
  })
}

表单 FormModal 的 rules

动态改变规则的 是否必填项：将 rules 放到 computed 中。

// 添加用户时显示必填，非添加时为非必填。
computed: {
  rules() {
    return {
      mobile: [{
        required: true,
        validator: validateMobile,
        trigger: ['blur', 'change']
      }],
      company: [{
        required: this.modifyType === 'add',
        message: '工作单位不能为空',
        trigger: ['blur', 'change']
      }],
      deptId: [{
        required: true,
        message: '归属机构不能为空',
        trigger: ['blur', 'change']
      }],
      expiryDate: [{
        required: true,
        message: '有效期不能为空',
        trigger: ['blur', 'change']
      }]
    }
  }
}