vue-avator-cropper
v1.1.2
Published
A Vue.js project
Downloads
2
Readme
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，可打开头像编辑弹框 |
upload-options: 如果ifUpload为true,则必填
| 参数名 | 参数类型 | 参数值 | | ------------ | ------------ | ------------ | | uploadUrl | String | 上传图片接口地址，必填 | | params | Object | 上传参数，非必填 |
img-url 当前显示头像地址