<template>
  <div class="demo-upload-basic">
    <ui-alert
      v-if="alertMsg"
      :title="alertMsg"
      class="demo-upload-alert"
      type="warning"
      show-icon>
    </ui-alert>
    <ui-upload
      :url="url"
      :multiple="true"
      :limit="3"
      :list-type="'pictureCard'"
      :on-exceed="onExceed"
      :on-change="onChange">
    </ui-upload>
  </div>
</template>

<script>
import { Upload, Alert } from "amumu-ui"

export default {
  components: {
    "ui-upload": Upload,
    "ui-alert": Alert,
  },
  data() {
    return {
      url: "https://jsonplaceholder.typicode.com/posts/",
      alertMsg: "",
    }
  },
  methods: {
    onExceed(current, limit) {
      this.alertMsg = `最多只能上传${limit}个文件，当前已选中${current}个文件，请重新选择`
    },
    onChange() {
      this.alertMsg = ""
    },
  },
}
</script>

<style lang="scss">
.demo-upload-basic {
  position: relative;
}

.demo-upload-alert {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 21;
}
</style>
