• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

我的博客我做主

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

若依--图片预览组件

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

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

<script setup>
const props = defineProps({
  src: {
    type: [String , Array],
    default: ""
  },
  defautSrc: {
    type: [String , Array],
    default: ""
  },
  width: {
    type: [Number, String],
    default: ""
  },
  height: {
    type: [Number, String],
    default: ""
  }
});

const realSrc = computed(() => {
  if (!props.src) {
    return;
  }
  let real_src = Array.isArray(props.src) ? props.src.map(z=>z.url)[0] : props.src?.split(",")[0]
  return real_src || props.defautSrc;
});

const realSrcList = computed(() => {
  if (!props.src) {
    return;
  }
  let real_src_list = Array.isArray(props.src) ? props.src.map(z=>z.url) : props.src?.split(",")
  let srcList = [];
  (real_src_list || [props.defautSrc]).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>




作者:胡倩倩0903
出处:https://www.cnblogs.com/kitty-blog/
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。

posted on 2023-05-08 14:48  kitty20180903suzhou  阅读(2292)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3