更新记录
1.0.7(2022-06-01) 下载此版本
修改插件标题
1.0.6(2022-06-01) 下载此版本
更新文档
1.0.5(2022-06-01) 下载此版本
更新文档
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | √ | √ | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
jr-avatar-clip (头像裁剪)
使用方法
引入、注册组件 ,示例如下;
<template>
<view class="">
<jr-avatar-clip
selWidth="480upx"
selHeight="480upx"
ref='avatar'
fileType='png'
:canRotate="false"
:avatarSrc="avatar"
@upload="uploadHandle"
quality="1"
avatarStyle="width: 45px; height: 45px;"
>
</jr-avatar-clip>
</view>
</template>
<script>
import jrAvatarClip from '@/uni_modules/jr-avatar-clip/components/jr-avatar-clip/jr-avatar-clip.vue'
export default {
components:{
jrAvatarClip
},
data(){
return {
avatar: 'https://uhr-sit-1302914566.cos.ap-guangzhou.myqcloud.com/uhr/image/2022-03-08/b61a93d5-b12f-4b0b-8ace-0c7a8eadf6e7.png'
}
},
methods:{
uploadHandle(e){
}
}
}
</script>
<style>
</style>
Attributes
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
avatarSrc | 默认头像 | string | - |
avatarStyle | 头像样式 | object | {width: 150upx; height: 150upx; border-radius: 100%;} |
selWidth | 裁剪区域的宽 | string | - |
selHeight | 裁剪区域的高 | string | - |
fileType | 裁剪出的文件类型 | string | - |
expWidth | 导出图片宽度 | string | - |
minScale | 裁剪最小的缩放值 | string | - |
maxScale | 裁剪最大的缩放值 | string | - |
canScale | 是否可以缩放 | boolean | false |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
upload | 裁剪完成回调 | 上传完成后的Object 注:当为H5时候 取 对象中的base64属性,非H5取path属性 |