Vue头像裁剪器 - vue-avatar-cropper

插件名称	vue-avatar-cropper
版本号	v2.0.1
发布时间	2020年9月6日
插件作者	overtrue

轻松优雅的图像裁剪器，可上传头像。

特征：

自定义触发事件。
活动。
可缩放
自定义宽高比。
允许您设置允许的模因类型。
事件处理程序。

安装和下载：

$  npm i vue-avatar-cropper --save-dev

使用：

<template>
  <div class="text-center">
    <img v-if="userAvatar" :src="userAvatar">
    <button id="pick-avatar">选择一张图片</button>
    <avatar-cropper
      @uploaded="handleUploaded"
      trigger="#pick-avatar"
      upload-url="/files/upload" />
  </div>
</template>

<script>
  import AvatarCropper from "vue-avatar-cropper"

  export default {
    components: { AvatarCropper },
    data() {
      return {
          userAvatar: undefined,
      }
    },
    methods: {
      handleUploaded(resp) {
        this.userAvatar = resp.relative_url;
      }
    }
  }
</script>