克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

vue-select-avatar

这是一个基于 vue 选择头像的包,用户可以通过简单的鼠标操作对图片实现缩放、移动的效果,从而得到一张符合用户预期的头像。

说明

2 版本相比 1 版本取消支持了移动端,而 2 版本使用 ts + vue2 + sass 进行了重构

未来的 3 版本,将采用 ts + vite + vue3 + sass 进行开发

演示地址

gitee

安装

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;
		}
	});

options

参数 类型 可选值 默认值 说明
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 格式占用空间更小

result

根据 dataType 的值返回不同的结果

设置值 返回类型
base64 string
file File
all { base64: string, file: File; }

error

错误类型 name code 说明
ImageTypeError ImageTypeError 0 "vue-select-avatar"几乎支持所有常见图片类型(除了 gif)
TmageFileTooLarge TmageFileTooLarge 1 图片文件过大
ImageDimensionsTooSmall ImageDimensionsTooSmall 2 图片尺寸过小

支持选择的图片类型

  • jpg
  • jpeg
  • png
  • svg
  • svgz
  • webp
  • ico
  • xbm
  • tif
  • jfif
  • tiff
  • bmp
  • pjp
  • apng
  • pjpeg
  • avif
MIT License Copyright (c) 2023 laowans Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于vue选择头像的包 展开 收起
JavaScript 等 4 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化