代码拉取完成,页面将自动刷新
这是一个基于 vue 选择头像的包,用户可以通过简单的鼠标操作对图片实现缩放、移动的效果,从而得到一张符合用户预期的头像。
2 版本相比 1 版本取消支持了移动端,而 2 版本使用 ts + vue2 + sass 进行了重构
未来的 3 版本,将采用 ts + vite + vue3 + sass 进行开发
npm i vue-select-avatar
注意:vue2 的项目请安装 "2.x.x" 版本,vue3 的项目暂时还不支持
// 导入
import selectAvatar from 'vue-select-avatar';
selectAvatars({
// 配置项……
})
.then((data) => {
console.log('返回数据:', data);
})
.catch((err) => {
// 错误处理
switch (err.code) {
case 0:
console.log('图片格式错误');
break;
case 1:
console.log('图片文件过大');
break;
case 2:
console.log('图片尺寸过小');
break;
}
});
参数 | 类型 | 可选值 | 默认值 | 说明 |
---|---|---|---|---|
title |
string | '选择头像' | 标题 | |
confirmButtonText |
string | '确定' | 确定按钮文本 | |
cancelButtonText |
string | '取消' | 取消按钮文本 | |
themeColor |
string | '#409EFF' | 主题色('#409EFF' / '64, 158, 255') | |
edgeLine |
boolean | true | 是否展示边缘线 | |
overlay |
boolean | true | 是否展示遮罩层 | |
top |
string | 对话框距离顶部的距离,接受 css 长度值(10px, 10vh),不传就是垂直居中 | ||
dark |
boolean | false | 是否为暗色模式 | |
gridBackground |
boolean | true | 是否使用网格背景 | |
dataType |
string | 'base64' / 'file' / 'all' | 'all' | 返回数据格式 |
ext |
string | 'png' / 'jpg' / 'webp' | 'png' | 返回图片格式 |
filename |
string | 返回图片格式为 file 的文件名,默认为选择图片的文件名(注意不要加扩展名) | ||
maxZoomRatio |
number | 6 | 最大缩放比(需要大于 0) | |
viewportSize |
number | 300 | 取景器/视口 大小 | |
fileSizeLimit |
number | 2048 | 选择图片文件的大小限制,单位:KB | |
maxAvatarSize |
number | 0 | 返回头像最大值,当选择区域的头像大小(宽高)超过这个值时,则按照设置的宽高值返回(大于 0 生效) | |
minAvatarSize |
number | 0 | 选择的图片宽高的最小值(当用户选择的图片小于设置的值,则进入错误处理)(大于 0 生效) | |
minAvatarSizeLimit |
boolean | false | 当这个为 true 且设置了 minAvatarSize 时,图片放大时宽高的最小值就不能超过 minAvatarSize |
|
cropperSize |
number | 60 | 遮挡区宽度 | |
closeOnClickOverlay |
boolean | true | 是否可以通过点击遮罩层关闭 | |
closeOnPressEscape |
boolean | true | 是否可以通过按下 ESC 关闭 | |
beforeClose |
(done: Function) => void | 关闭前的回调,回调函数内执行 done 参数方法的时候才是真正关闭的时候(当点击遮罩层、按下 ESC 键、点击关闭按钮的时候触发) | ||
arrowKeys |
boolean | true | 是否可以通过方向键和 w、a、s、d 键调整位置 |
ext 选项建议选择 webp,因为 webp 格式在同等大小的图片下 webp 格式占用空间更小
根据 dataType 的值返回不同的结果
设置值 | 返回类型 |
---|---|
base64 | string |
file | File |
all | { base64: string, file: File; } |
错误类型 | name | code | 说明 |
---|---|---|---|
ImageTypeError | ImageTypeError | 0 | "vue-select-avatar"几乎支持所有常见图片类型(除了 gif) |
TmageFileTooLarge | TmageFileTooLarge | 1 | 图片文件过大 |
ImageDimensionsTooSmall | ImageDimensionsTooSmall | 2 | 图片尺寸过小 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。