首页 > 其他分享 >若依--图片预览组件

若依--图片预览组件

时间:2023-05-08 14:55:56浏览次数:35  
标签:src const 预览 -- height 若依 width props return

若依的图片预览组件,很实用,放在这里:

<template>
  <el-image
    :src="`${realSrc}`"
    fit="cover"
    :style="`width:${realWidth};height:${realHeight};`"
    :preview-src-list="realSrcList"
    :preview-teleported="true"
  >
    <template #error>
      <div class="image-slot">
        <el-icon><picture-filled /></el-icon>
      </div>
    </template>
  </el-image>
</template>

<script setup>
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];
  return real_src;
});

const realSrcList = computed(() => {
  if (!props.src) {
    return;
  }
  let real_src_list = props.src.split(",");
  let srcList = [];
  real_src_list.forEach(item => {
    return srcList.push(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>


标签:src,const,预览,--,height,若依,width,props,return
From: https://www.cnblogs.com/kitty-blog/p/17381755.html

相关文章

  • 《asyncio 系列》8. 在 asyncio 中通过流(StreamReader、StreamWriter)来实现 TCP 请求
    楔子在编写网络应用程序时,我们使用了socket库来读取和写入客户端。虽然在构建低级网络库时直接使用套接字很有效,但用法上还是有些复杂,例如启动服务端、等待客户端连接以及向客户端发送数据等等。asyncio的设计者意识到这一点,并构建了网络流API,这些更高级的API比套接字更容......
  • 通过simulink搭建的三通道交错并联双向buck-boost变换器。
    通过simulink搭建的三通道交错并联双向buck-boost变换器。采用电压外环,三电流内环,载波移相120°的控制方式。在buck模式与boost模式互相切换之间,不会产生过压与过流。且交错并联的拓补结构,可以减少电感电流的纹波,减小每相电感的体积,提高电路的响应速度。该拓补可以用于储能系统中......
  • 接口测试框架REST Assured(一) 测试get接口
    使用RESTAssured接口测试框架测试get接口主要依赖rest-assured-5.2.0.jarstep1:传入get的params参数 step2:调用get方法 对比使用postman发get请求 返回结果 ......
  • imu 话题数据,欧拉角
    header:消息头,包含序列号、时间戳和坐标系等信息。orientation:IMU的当前朝向,用四元数表示,包括$x,y,z$和$w$四个值。orientation_covariance:朝向协方差矩阵,包含$9$个元素,描述IMU测量的朝向误差。angular_velocity:IMU的角速度,包含$x,y,z$三个分量。ang......
  • Linux、yum仓库配置
    yum的常用命令1)基本语法:yuminstall-yhttpd              (功能描述:安装httpd并确认安装)yumlist                              (功能描述:列出所有可用的package和package组)yumcleanall                 ......
  • Linux基础18 磁盘介绍, 结构, 磁盘分区Fdisk
    磁盘的基本概念 1.什么是磁盘?磁盘就像是森林,是所有硬式存储的统称,如最早出现的软盘,现在的硬盘,都是磁盘中的一部分。2.什么是软盘?磁盘开始指的是1.44MB的3.5英寸磁盘,这是很早时候的电脑储存盘,也叫软盘。软盘在如今已经很少被使用了,使用软盘需要安装软盘驱动。软盘容量小,容易损坏......
  • 135. 分发糖果
    老师想给孩子们分发糖果,有N个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分。你需要按照以下要求,帮助老师给这些孩子分发糖果:每个孩子至少分配到1个糖果。相邻的孩子中,评分高的孩子必须获得更多的糖果。那么这样下来,老师至少需要准备多少颗糖果呢?示例1:......
  • 整车动力学模型_simulink(7自由度或者14自由度)
    整车动力学模型_simulink(7自由度或者14自由度)软件使用:Matlab/Simulink适用场景:采用模块化建模方法,搭建7自由度和14自由度整车模型,作为整车平台适用于多种工况场景。产品simulink源码包含如下模块:工况:阶跃工况整车模块:7自由度整车模型(需要14自由度整车模型需额外说明,不在里面)包......
  • 虚拟机、容器对比
    一、容器docter1、概要Docker是一个开源的应用容器引擎,基于 Go语言 并遵从Apache2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互......
  • 直播系统搭建,java二维码 生成二维码
    直播系统搭建,java二维码生成二维码 packageBasicsTest;importcom.swetake.util.Qrcode;importjavax.imageio.ImageIO;importjava.awt.*;importjava.awt.image.BufferedImage;importjava.io.File;/***二维码生成 *Createdbyxson2017/2/6. */publicclassQRCode......