Vue3鼠标悬浮个人头像时出现修改头像,点击出现弹框,上传头像使用cropperjs可裁剪预览

实现效果:

鼠标悬浮到头像上,下方出现修改头像

点击修改头像出现弹框,弹框中可上传头像,并支持头像的裁剪及预览

 

实现方式: 

1.tempalte中

<div class="img-box"><img v-if="avatarImgUrl" :src="avatarImgUrl" class="avatar" /><div class="text" @click="toFixImg()">修改头像</div></div>

注意:用服务端做渲染的同学v-if="avatarImgUrl"必须添加,不然会因水合作用图片出现问题。

<el-dialogv-model="dialogVisible"title="修改图片"width="700"@close="cancelFixAvatar":close-on-click-modal="false"><inputtype="file"accept="image/*"@change="onFileChange"id="myFileInput"style="display: none"ref="fileInput"/><!-- 触发文件选择的按钮 --><button type="button" class="change-img" @click="triggerFileInput">选择图片</button><!-- 图片裁剪区域 --><div v-if="imageUrl" class="cropper-img"><vue-cropper:key="imageKey"ref="cropper":src="imageUrl"style="width: 300px; height: 300px":options="cropperOptions"/><div @click="cropImage" class="confirm-btn">点击预览</div><!-- 显示裁剪后的图片(可选) --><div v-if="croppedImageUrl" class="cropped"><img:src="croppedImageUrl"alt="Cropped Image"style="width: 200px; height: 200px; border-radius: 50%"/></div></div><template #footer><div class="dialog-footer"><el-button @click="cancelFixAvatar">取消</el-button><el-button type="primary" @click="fixAvatar"> 确定 </el-button></div></template></el-dialog>

以上为点击修改头像出现的弹框,实现裁剪图片主要使用的是cropperjs插件,需先安装此插件。

npm install cropperjs --save

2.script中 

引入相关文件及定义变量

import 'cropperjs/dist/cropper.css';
import VueCropper from 'vue-cropperjs';
const dialogVisible = ref(false);
const avatarImgUrl = ref('');
const imageUrl = ref('');
const croppedImageUrl = ref('');
const cropperOptions = ref({aspectRatio: 1, // 设置裁剪框的比例viewMode: 1, // 限制图片的拖动范围// ...其他选项
});
const token = ref('');
const croppedImg = ref('');
const imageKey = ref(0); // 使用 key 来强制重新渲染
const cropper = ref(null);

定义使用的相关方法


// 点击“修改头像”
const toFixImg = () => {dialogVisible.value = true;nextTick(() => {document.getElementById('myFileInput').addEventListener('change', onFileChange);});
};// 监听上传的头像变化
const onFileChange = (e) => {const file = e.target.files[0];if (!file) return;const reader = new FileReader();reader.onload = (e) => {imageUrl.value = e.target.result;imageKey.value += 1;};reader.readAsDataURL(file);
};
// 再次点击“选择图片”替换
const triggerFileInput = () => {fileInput.value.click();
};
// 裁剪图片
const cropImage = () => {cropper.value.getCroppedCanvas().toBlob((blob) => {croppedImageUrl.value = URL.createObjectURL(blob);let file = new File([blob], 'test.png', { type: blob.type });// 这里添加将blob发送到服务器的逻辑,根据个人情况,此处调用的后端接口const formData = new FormData();formData.append('files', file);formData.append('folder', 'avatarArr');let uploadFileRequest = new Request(config.public.baseUrl +'xxxx',{method: 'post',headers: {Authorization: token.value,},body: formData,},);fetch(uploadFileRequest).then((response) => {let result = response.text();result.then((res) => {const resdata = JSON.parse(res);if (resdata.code == 200) {croppedImg.value = resdata.data[0].fileAddr;}});});}, 'image/jpeg');
};
// 修改头像弹框的确定按钮
const fixAvatar = () => {if (!croppedImg.value || croppedImg.value == '') {ElMessage({message: '请预览效果后点击保存',type: 'warning',customClass: 'mzindex',});return;}
// 此处调用后端提供的保存接口};
// 修改弹框的取消按钮
const cancelFixAvatar = () => {imageUrl.value = '';croppedImageUrl.value = '';imageKey.value = 0;dialogVisible.value = false;
};// 监听头像的改变
watch(() => store.fetchImage(),(newVal) => {if (newVal) {avatarImgUrl.value = `${config.public.baseUrl}/digit-trade-platform-system/file/${newVal}`;}},{ immediate: true },{ deep: true },
);

3.style中

.img-box {position: relative;display: inline-block;width: 100px; /* 或者你需要的大小 */height: 100px; /* 和宽度相同,形成圆形 */.avatar {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;cursor: pointer;}.icon{position: absolute;bottom: 0;right: 0;}.text {position: absolute;bottom: 0; /* 文本定位在底部 */left: 50%; /* 水平居中 */width: 60%;padding: 5px 0;transform: translateX(-50%); /* 文本水平居中 */background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */color: white;text-align: center;border-radius: 0 0 50% 50% / 50%; /* 底部平直的圆角 */opacity: 0;transition: opacity 0.3s ease; /* 添加过渡效果 */font-size: 11px;cursor: pointer;}/* 鼠标悬浮在头像上时显示文本 */.avatar:hover + .text,.text:hover {opacity: 1; /* 鼠标悬浮时显示文本 */}}.change-img {background-color: $mainColor; /* Green */border: none;color: white;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 4px;width: 100px;height: 40px;line-height: 40px;}.cropper-img {width: 100%;margin: 20px 0;display: flex;.confirm-btn {margin: 140px 20px 0 20px;width: 100px;height: 36px;background-color: $mainColor;color: #fff;text-align: center;line-height: 36px;border-radius: 4px;cursor: pointer;}.cropped {margin-top: 60px;}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/29695.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript 传参方法

1. 值传递 在 JavaScript 中&#xff0c;基本类型&#xff08;也称为原始类型&#xff09;包括 undefined、null、boolean、number、string、bigint 和 symbol。这些类型在函数调用时是通过值传递的&#xff0c;这意味着在函数内部修改参数的值不会影响函数外部的原始值。 fu…

常见的网络设备

引入 园区网络安全部署场景 1、路由器&#xff1a; 跨网段通信设备 。 2、交换机&#xff1a; 同网段或跨网段通信设备。 3、AntiDDoS &#xff1a; DDoS 防御系统&#xff0c;通常旁挂部署于网络出口处&#xff0c; 位于防火墙上游&#xff0c;用于减轻防火墙报文处理负担。 …

CENTOS7.9下服务器双网卡bond模式6配置示例

​1.bond口的特点 bond口通过将多个网口进行聚合&#xff0c;多个网口聚合后一方面实现了大带宽传输&#xff0c;另外多网口聚合后也同时具有冗余特性&#xff0c;当其中一个网口down掉后&#xff0c;其他网口会继续转发流量&#xff0c;不会导致流量中断。 2.使用条件 当环境…

CAD二次开发(10)-单行文字的添加+图形修改

1. 单行文字的添加 第一步&#xff1a; 首先在CAD中新增中文样式 输入ST命令&#xff1a; 第二步&#xff1a;代码开发 /// <summary>/// 添加文本信息/// </summary>[CommandMethod("AddText")]public void AddText(){var doc Application.DocumentM…

全氟己酮自动灭火材料表现亮眼!手把手教你自动灭火毯的使用方法

灭火毯的使用方法是什么&#xff1f;很多朋友在购买灭火毯之前&#xff0c;都比较关心这个问题。在这里&#xff0c;我们可以把灭火毯分为两种。一种是传统灭火毯&#xff0c;还有一种是近年来兴起的高科技产品—全氟己酮自动灭火毯。这两种灭火毯的使用方法大有不同&#xff0…

[算法刷题—二分法]寻找插入位置

题目展示: 本道题本身并不是很难,主要是学习和分析二分查找插入位置的方法。 首先大体上分为两种情况: 一.target在待查找的数组之中,返回对应值的下标索引。 二.target不在待查找的数组之中&#xff0c;需要返回target插入位置的索引(原数组有序) 第一种情况不难&#xff…

WordPress 站点 Wp-Login.Php 登录页面,防止被机器扫描爆破终极方法

最近好像不少的 WordPress 站点又迎来了一波疯狂的 wp-login.php 登录页面暴力破解,明月使用的 Dragon 主题也迅速的做出了安全防范响应,第一时间就增强了代码上的安全防御能力。明月代运维的几个站点也在这方面加强了防范措施,基本上实现了永久解决这一顽疾的目标,今天明月…

探索VtKLoader源码中THREE.BufferGeometry的奥秘

1. 介绍 1.1 什么是VtKLoader&#xff1f; VtKLoader是一种用于加载和解析VTK&#xff08;Visualization Toolkit&#xff09;文件格式的JavaScript加载器。VTK是一个用于科学可视化和图形处理的开源软件系统&#xff0c;广泛应用于医学影像处理、地球科学、工程和计算流体动…

使用 Redis + Lua 实现分布式限流

在线工具站 推荐一个程序员在线工具站&#xff1a;程序员常用工具&#xff08;http://cxytools.com&#xff09;&#xff0c;有时间戳、JSON格式化、文本对比、HASH生成、UUID生成等常用工具&#xff0c;效率加倍嘎嘎好用。 程序员资料站 推荐一个程序员编程资料站&#xff1a;…

基于minhook的Windows HOOK

MinHook是一个基于微软Detours技术的可移植Hook库&#xff0c;它允许开发者在运行时更改函数定义&#xff0c;而无需修改原始函数代码。以下是关于MinHook的详细介绍&#xff1a; 基本概念 定义&#xff1a;MinHook使用内存污染和跳转技术来实现Hook&#xff0c;使得开发者能…

视频汇聚安防综合管理平台EasyCVR支持GA/T 1400视图库标准及设备接入配置

一、概述 视频汇聚安防综合管理平台EasyCVR视频监控系统已经与公安部GA/T 1400视图库标准协议实现了对接&#xff0c;即《公安视频图像信息应用系统》。 安防监控系统EasyCVR支持采用GA/T 1400进行对接&#xff0c;可实现人脸数据使用的标准化、合规化。其采用统一接口对接雪…

工具清单 - Bug追踪管理

# 工具清单 Bugzilla在新窗口打开 - General-purpose bugtracker and testing tool originally developed and used by the Mozilla project. MPL-2.0 PerlBumpy Booby在新窗口打开 - Simple, responsive and highly customizable PHP bug tracking system. (Source Code在新窗…

初识微信小程序之swiper和swiper-item的基本使用

在我还没接触到微信小程序之前&#xff0c;通常使用轮播要么手写或使用swiper插件去实现&#xff0c;当我接触到微信小程序之后&#xff0c;我看到了微信小程序的强大之处&#xff0c;让我为大家介绍一下吧&#xff01; swiper与swiper-item一起使用可以做轮播图 基本使用&…

分布式技术导论 — 探索分析从起源到现今的巅峰之旅(流式处理到微批处理)

探索分析从起源到现今的巅峰之旅 流式计算回顾流式服务结合分布式特性 流式计算组成部分监控数据处理进度流式分析案例流转数据的衍生存储确认器采取高效策略确认器异常应对策略工作节点故障的处理&#xff08;精确一次处理&#xff09;确认器故障的处理&#xff08;恰好一次处…

新人学习笔记之(数据类型(整数))

一、整数的数据类型分为&#xff1a;short、int、long、long long #include<stdio.h>int main() {// 1. 定义short、int、long、longlong四种数据类型// 格式&#xff1a;数据类型 变量名 数据值// short 短整型 windows 2个字节 &#xff08;-32768 ~ 32767&#xff0…

Spring Cloud Gateway 概述与基本配置(下)

在上篇文章中&#xff0c;我们介绍了 Spring Cloud Gateway 的基本概念和配置方法。在这篇文章中&#xff0c;我们将进一步探讨 Spring Cloud Gateway 的进阶配置和高级功能&#xff0c;包括更多内置过滤器、自定义断言工厂、集成 Eureka 以及如何创建自定义过滤器&#xff0c;…

【PPT教程】一键重置幻灯片背景的方法,新建幻灯片带默认背景

目的是替换18届的研电赛ppt背景为19届 这里写目录标题 1.设计->设置背景格式2.图片或纹理填充->插入3.选择需要替换为背景的照片4.点击下方的应用到全部 1.设计->设置背景格式 2.图片或纹理填充->插入 3.选择需要替换为背景的照片 4.点击下方的应用到全部 此时全部…

Google推出开源代码大模型CodeGemma:AI编程新纪元,代码自动完成和生成技术再升级

论文标题: CodeGemma: Open Code Models Based on Gemma机构: Google LLC论文链接: https://arxiv.org/pdf/2406.11409.pdf CodeGemma模型概述 CodeGemma是基于Google DeepMind的Gemma模型系列&#xff08;Gemma Team et al., 2024&#xff09;开发的一系列开放代码模型。这些…

Flutter - Material3适配

demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新&#xff0c;请前往github查看最新代码 Flutter - Material3适配 对比图具体实现一些组件的变化 代码实现Material2的ThemeDataMaterial3的ThemeData Material3适配官方文档 flutter SDK升级到3.16.0之后 …

exports和module.exports使用误区

在Node.js中&#xff0c;exports和module.exports是用于从模块中导出功能的关键概念。然而&#xff0c;它们之间存在一些常见的使用误区&#xff0c;以下是对这些误区的详细解释&#xff1a; 误区一&#xff1a;exports和module.exports没有区别 事实&#xff1a;虽然exports…