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

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

插件名称:vue-avatar-cropper

发布时间:2020年9月6日

插件作者:overtrue

官网 GitHub下载

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

特征:

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

变更日志:

2020/09/05

  • v1.0.7

安装和下载:

$  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>
相关插件