Vue-avator-cropper NPM

vue-avator-cropper

A Vue.js Component 组装的头像上传，裁切的组件

依赖

该项目依赖

1. vue-cropper

npm install vue-crpper --save

2. Elementui

npm i element-ui -S

安装

1. npm 安装：

npm install vue-avator-cropper

2. yarn 安装：

yarn add vue-avator-cropper

3. 引用 vue-avator-cropper.js

用法

1. 组件内部使用

html: 
   <Avator-cropper :options="avatorOption" :upload-options="uploadOptions" :img-url="'当前图片地址'"></Avator-cropper>

js：

   import AvatorCropper from 'vue-avator-cropper';

    components: {
      AvatorCropper
    }

2. main.js 全局安装：

import AvatorCropper from 'vue-avator-cropper'
Vue.use(AvatorCropper)

然后在其他.vue文件里面，直接使用组件 <vue-avator-cropper :upload-url="'上传地址'" :upload-data="上传参数" :img-url="'当前图片地址'"/> 即可

3.直接引用打包后的 vue-avator-cropper.js

这种方式就不需要webpack这类的构建工具，跟jquery的方式差不多，可以直接页面引用，使用方法示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
<div id="app">
  <vue-avator-cropper :upload-url="'上传地址'" :upload-data="上传参数" :img-url="'当前图片地址'"></vue-avator-cropper>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./dist/vue-avator-cropper.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        propData: '11111111111111111111'
      }
    },
    methods: {
    }
  })
</script>
</body>
</html>

组件属性

Options: 非必填，如不传，都用默认值

参数名	参数类型	参数值
width	String	头像占位图的宽，带单位
height	String	头像占位图的高，带单位
classType	String	头像占位图是圆形还是方形，可选值：circle , square
ifUpload	Boolean	是否带上传功能，如果为true，可打开头像编辑弹框