前言

这个库叫 vue-select-avatar，为什么推荐这个库呢，正常在一个网站更换头像，大部分都是点击选择头像按钮或是点击头像位置，然后出来一个对话框，或者直接就直接弹出文件管理器页面，让你选择一张合适的图片作为头像，然后就展示一个缩略图，下面就是确定、取消按钮，点确定就提交服务器。这是一个大部分网站的选择头像的流程。当这个中间貌似少了一步，就是用户不能选择需要图片的那一部分，比如放大、在移动到需要的部分，这个库就解决了这个问题，就像微信选择头像那样，当然这个库不能像微信那样在移动端做到那么的丝滑（这是因为在移动端浏览器双指放大很容易触发浏览器原生的的放大事件），但在PC端我们可以通过简单的鼠标操作就能实现这个效果。

效果展示

下面是演示：

PC端

移动端

当然这个库还支持移动端（因为容易触发浏览器原生放大事件的原因，因此移动端的缩放是通过按钮来实现的），这里用电脑模拟手机操作

效果图：

这个库最大的好处是，它返回的图片的是正方形的，很好的避免了上传的图片的宽高不一致导致的显示问题

夜间模式

还有这个库支持夜间模式：

不同主题色

同时还可以设置不同的主题色：

使用

说了怎么多来看怎么使用吧

首先下载

npm i vue-select-avatar

使用也非常简答它是一个函数，传入一个配置对象，它是Promise风格的所以通过.then获取数据，支持返回两种数据，base64 和 file 文件对象，下面是基本使用：

// 导入
import selectAvatars from 'vue-select-avatars' export default {name: 'App',methods:{click(){// 使用selectAvatars({ // 配置项nightMode: true, // 是否为夜间模式}).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;}})}},
}

配置项

这个包还有很多的配置项，如设置返回图片的最大尺寸，设置选择图片的最小尺寸等等，下面是具体的配置表：

参数	说明	类型	可选值	默认值
returnType	返回的数据格式	string	base64 / file	base64
nightMode	是否为夜间模式	boolean		false
title	标题	string		选择头像
maskLayer	是否出现遮罩层	boolean		true
beforeClose	点击遮罩层和右上角叉的回调函数，关闭前调用这个函数，并传入一个函数形参。需调用传入的函数才可关闭窗口	function		无
cancelButtonText	取消按钮文本	string		取消
confirmButtonText	确定按钮文本	string		确定
zoomRatio	最大放大倍数	number		6
accept	选择的文件格式，数组：['png', 'jpeg']、通配符："*"	array / string		*
maxKB	文件最大KB值	number		2048
edgeLine	是否展示边缘线	boolean		true
edgeLineOpacity	边缘线透明度（0.0 - 1.0）	number		0.8
themeColor	主题色(16进制颜色代码)	string		#409EFF
minSize	用户选择的图片的宽高不能低于设置的值（设置合理的值可以保证头像的清晰度）	number		0
avatarMaxSize	是否开启返回头像最大尺寸（开启后最终返回的图片的宽高大于设置的值时，将会把图片的宽高改为设置的值，可以保证返回的头像不会太大）	boolean		false
returnAvatarMaxSize	返回头像最大尺寸（需要开启 avatarMaxSize 才可生效）	number		512

错误处理

用错误代码，判断是那种错误，通过错误对象的 code 属性获取

例：

selectAvatars({nightMode: true,
}).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;}
})

错误代码表：

错误代码值（number）	说明
0	图片格式错误
1	图片文件过大
2	图片尺寸过大

使用注意：

1、在移动端使用时需开启“移动端理想视口”，否则弹出的对话框的比例将过小

在 head 标签内添加如下代码即可开启

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

2、图片最终返回的大小是根据，图片原始大小和放大比例来裁剪的，并不是根据对话框的大小，如果图片很大，放大比例假如为1的话，那么返回的图片就会很大，若图片很小，放大比例也为1的话，那么返回的图片就会很小。

3、目前仅支持 vue2 对 vue3 不兼容

为什么我会推荐这个包呢，还知道这么多，因为这个就是我写的。

感觉有点王婆卖瓜自卖自夸的感觉了

写的不好，还请见谅。若有错误，烦请指出，谢谢

推荐一个基于vue选择头像的库

前言

效果展示

PC端

移动端

夜间模式

不同主题色

使用

配置项

错误处理

错误代码表：

使用注意：

推荐一个基于vue选择头像的库相关推荐

最新文章

热门文章