当前位置: 首页 > news >正文

vue 实现图片预览功能并显示在弹窗的最上方

vue 实现图片预览功能并显示在弹窗的最上方

  1. components 下新建一个文件夹 ImagePreview
  • 使用 preview-teleported 来实现图片穿透功能 让预览的图片显示在最上方

代码如下:

<template><el-image:src="`${realSrc}`"fit="cover":style="`width:${realWidth};height:${realHeight};`":preview-src-list="realSrcList"preview-teleported><template #error><div class="image-slot"><el-icon><picture-filled /></el-icon></div></template></el-image>
</template><script setup>
import { isExternal } from "@/utils/validate";const props = defineProps({src: {type: String,default: ""},width: {type: [Number, String],default: ""},height: {type: [Number, String],default: ""}
});const realSrc = computed(() => {if (!props.src) {return;}let real_src = props.src.split(",")[0];if (isExternal(real_src)) {return real_src;}return import.meta.env.VITE_APP_BASE_API + real_src;
});const realSrcList = computed(() => {if (!props.src) {return;}let real_src_list = props.src.split(",");let srcList = [];real_src_list.forEach(item => {if (isExternal(item)) {return srcList.push(item);}return srcList.push(import.meta.env.VITE_APP_BASE_API + item);});return srcList;
});const realWidth = computed(() =>typeof props.width == "string" ? props.width : `${props.width}px`
);const realHeight = computed(() =>typeof props.height == "string" ? props.height : `${props.height}px`
);
</script><style lang="scss" scoped>
.el-image {border-radius: 5px;background-color: #ebeef5;box-shadow: 0 0 5px 1px #ccc;:deep(.el-image__inner) {transition: all 0.3s;cursor: pointer;&:hover {transform: scale(1.2);}}:deep(.image-slot) {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;color: #909399;font-size: 30px;}
}
</style>
  1. main.js 内注册组件
import ImagePreview from "@/components/ImagePreview"
// 全局组件挂载
app.component('ImagePreview', ImagePreview)
  1. 在页面使用
<image-preview :src="images" style="height: 60px;width:60px;" />

http://www.mrgr.cn/news/61827.html

相关文章:

  • 创建型模式-----建造者模式
  • 【Java笔记】1-JDK/JRE/JVM是个啥?
  • centos下面的jdk17的安装配置
  • 快速在本地运行SpringBoot项目的流程介绍
  • java 20 Stream流
  • Zookeeper 理论基础
  • 批发订货系统有哪些功能 b2b网站源码哪里购买靠谱
  • 【测试平台】【前端VUE】工具页面学习记录
  • 当贝Smart1、小明Q3 Pro、大眼橙C1D对比!预算千元,哪款值得买
  • 【C++】RBTree——红黑树
  • vue3 ref和reactive踩坑
  • 如何在Linux系统中使用Ansible进行自动化部署
  • [ExoPlayer] 源码编译
  • git lfs 安装方法
  • 嵌入式软件在电子烟开发中的应用
  • 使用 vue3-video-play 视频播放组件过程中遇到的问题
  • Java:数据结构-MapSet
  • Deep InfoMax(DIM)(2019-02-ICLR)
  • 7000元投影仪性价比哪款好?当贝F7 Pro脱颖而出
  • 浏览器本地存储和token封装和浏览器导航栏title的笔记
  • 【遗传算法】孤岛模式下的微电网优化调度模型
  • 将多个commit合并成一个commit并提交
  • 探访宇树科技的G1人形机器人:未来消费级机器人的先驱
  • 闲一品交易平台:SpringBoot技术的新境界
  • Win7如何安装支持asp+mdb程序,安装配置IIS
  • [实时计算flink]安全访问最佳实践