vue3：实现图片放大浏览功能组件

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

一天只码五十行

1716人浏览 · 2024-06-15 16:53:15

一天只码五十行 · 2024-06-15 16:53:15 发布

两种实现方式：

1.将原本的盒子与img标签放大至全屏浏览。

2.新建一个div和img标签进行全屏浏览。这样不会改变布局。

第一种：

效果：

组件代码：

<template>
  <div :class="isScreen ? 'fullImg' : 'norImg'">
    <img
      :src="props.src"
      alt="img"
      :width="isScreen ? 'auto' : props.width"
      :height="isScreen ? 'auto' : props.height"
    />
    <!-- 放大缩小按钮 -->
    <div class="toBig" @click="showImg">
      <svg
        t="1718433997569"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2426"
        width="50"
        height="50"
      >
        <path :d="iconPath" fill="#140202" p-id="2427"></path>
      </svg>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  src: {
    type: String,
    default: "https://picsum.photos/200/300",
  },
  width: {
    type: Number,
  },
  height: {
    type: Number,
  },
});
let iconPath = ref<string>(
  "M800 163H226.2c-52.8 0-95.6 42.8-95.6 95.6v573.8c0 52.8 42.8 95.6 95.6 95.6H800c52.8 0 95.6-42.8 95.6-95.6V258.6c0-52.8-42.8-95.6-95.6-95.6zM465.3 832.4H250.8c-6.7 0-12.7-2.8-17-7.2-4.6-3.9-7.5-9.6-7.5-16.7V593.3c0-13.2 10.7-23.9 23.9-23.9s23.9 10.7 23.9 23.9l-0.8 157.2 162.3-162.3 33.8 33.8-162.6 162.6h158.5c13.2 0 23.9 10.7 23.9 23.9s-10.7 23.9-23.9 23.9zM800 497.7c0 13.2-10.7 23.9-23.9 23.9s-23.9-10.7-23.9-23.9l0.8-157.2-162.4 162.3-33.8-33.8 162.5-162.5H560.8c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9h214.5c6.7 0 12.7 2.8 17 7.2 4.6 3.9 7.6 9.6 7.6 16.7v215.1z"
);
//是否大屏展示
const isScreen = ref<boolean>(false);
// 点击展示
const showImg = () => {
  if (isScreen.value) {
    isScreen.value = false;
    iconPath.value =
      "M800 163H226.2c-52.8 0-95.6 42.8-95.6 95.6v573.8c0 52.8 42.8 95.6 95.6 95.6H800c52.8 0 95.6-42.8 95.6-95.6V258.6c0-52.8-42.8-95.6-95.6-95.6zM465.3 832.4H250.8c-6.7 0-12.7-2.8-17-7.2-4.6-3.9-7.5-9.6-7.5-16.7V593.3c0-13.2 10.7-23.9 23.9-23.9s23.9 10.7 23.9 23.9l-0.8 157.2 162.3-162.3 33.8 33.8-162.6 162.6h158.5c13.2 0 23.9 10.7 23.9 23.9s-10.7 23.9-23.9 23.9zM800 497.7c0 13.2-10.7 23.9-23.9 23.9s-23.9-10.7-23.9-23.9l0.8-157.2-162.4 162.3-33.8-33.8 162.5-162.5H560.8c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9h214.5c6.7 0 12.7 2.8 17 7.2 4.6 3.9 7.6 9.6 7.6 16.7v215.1z";
  } else {
    isScreen.value = true;
    iconPath.value =
      "M810.2 130.2H211.1c-55.1 0-99.8 44.7-99.8 99.8v599.1c0 55.1 44.7 99.8 99.8 99.8h599.1c55.1 0 99.8-44.7 99.8-99.8v-599c0-55.2-44.7-99.9-99.8-99.9z m-324.5 674c0 13.8-11.2 25-25 25s-25-11.2-25-25l0.8-164.1-169.4 169.4-35.3-35.3 169.7-169.7H236c-13.8 0-25-11.2-25-25s11.2-25 25-25h223.9c7 0 13.3 2.9 17.8 7.5 4.8 4.1 7.9 10.1 7.9 17.5v224.7z m299.5-299.6H561.3c-7 0-13.3-2.9-17.8-7.5-4.8-4.1-7.9-10.1-7.9-17.5V255c0-13.8 11.2-25 25-25s25 11.2 25 25l-0.8 164.1 169.4-169.4 35.3 35.3-169.8 169.7h165.5c13.8 0 25 11.2 25 25s-11.2 24.9-25 24.9z";
  }
};
</script>
<style scoped>
.fullImg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.norImg {
  position: relative;
  width: auto;
  height: auto;
}
.toBig {
  display: none;
}
.norImg:hover .toBig {
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.fullImg .toBig {
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
</style>

使用组件：

宽高只给一种可以保持图片比例，都不给图片正常大小

<template>
  <showImg :width="300" :height="300" :src="img"></showImg>
</template>
<script setup lang="ts">
import showImg from "../components/showImg.vue";
import img from "../assets/demoIMG.jpg";
</script>

第二种：

效果：

组件代码：

<template>
  <div class="norImg">
    <img
      :src="props.src"
      alt="img"
      :width="props.width"
      :height="props.height"
    />
    <!-- 放大缩小按钮 -->
    <div class="toBig" @click="showImg">
      <svg
        t="1718433997569"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2426"
        width="50"
        height="50"
      >
        <path
          d="M800 163H226.2c-52.8 0-95.6 42.8-95.6 95.6v573.8c0 52.8 42.8 95.6 95.6 95.6H800c52.8 0 95.6-42.8 95.6-95.6V258.6c0-52.8-42.8-95.6-95.6-95.6zM465.3 832.4H250.8c-6.7 0-12.7-2.8-17-7.2-4.6-3.9-7.5-9.6-7.5-16.7V593.3c0-13.2 10.7-23.9 23.9-23.9s23.9 10.7 23.9 23.9l-0.8 157.2 162.3-162.3 33.8 33.8-162.6 162.6h158.5c13.2 0 23.9 10.7 23.9 23.9s-10.7 23.9-23.9 23.9zM800 497.7c0 13.2-10.7 23.9-23.9 23.9s-23.9-10.7-23.9-23.9l0.8-157.2-162.4 162.3-33.8-33.8 162.5-162.5H560.8c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9h214.5c6.7 0 12.7 2.8 17 7.2 4.6 3.9 7.6 9.6 7.6 16.7v215.1z"
          fill="#140202"
          p-id="2427"
        ></path>
      </svg>
    </div>
  </div>
  <div class="fullImg" v-if="isScreen">
    <img :src="props.src" alt="img" />
    <div class="toBig" @click="showImg">
      <svg
        t="1718433997569"
        class="icon2"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2426"
        width="50"
        height="50"
      >
        <path
          d="M810.2 130.2H211.1c-55.1 0-99.8 44.7-99.8 99.8v599.1c0 55.1 44.7 99.8 99.8 99.8h599.1c55.1 0 99.8-44.7 99.8-99.8v-599c0-55.2-44.7-99.9-99.8-99.9z m-324.5 674c0 13.8-11.2 25-25 25s-25-11.2-25-25l0.8-164.1-169.4 169.4-35.3-35.3 169.7-169.7H236c-13.8 0-25-11.2-25-25s11.2-25 25-25h223.9c7 0 13.3 2.9 17.8 7.5 4.8 4.1 7.9 10.1 7.9 17.5v224.7z m299.5-299.6H561.3c-7 0-13.3-2.9-17.8-7.5-4.8-4.1-7.9-10.1-7.9-17.5V255c0-13.8 11.2-25 25-25s25 11.2 25 25l-0.8 164.1 169.4-169.4 35.3 35.3-169.8 169.7h165.5c13.8 0 25 11.2 25 25s-11.2 24.9-25 24.9z"
          fill="#140202"
          p-id="2427"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  src: {
    type: String,
    default: "https://picsum.photos/200/300",
  },
  width: {
    type: Number,
  },
  height: {
    type: Number,
  },
});

//是否大屏展示
const isScreen = ref<boolean>(false);
// 点击展示
const showImg = () => {
  if (isScreen.value) {
    isScreen.value = false;
  } else {
    isScreen.value = true;
  }
};
</script>
<style scoped>
.fullImg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.norImg {
  position: relative;
  width: auto;
  height: auto;
}
.toBig {
  display: none;
}
.norImg:hover .toBig {
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.fullImg .toBig {
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.icon2:hover path {
  fill: #fff;
}
</style>

使用组件：

<template>
  <div class="page">
    <div class="mainBox">
      <showImg2 :src="demoImg" :width="300" />
      <showImg2 :src="demoImg" :width="300" />
      <showImg2 :src="demoImg" :width="300" />
      <showImg2 :src="demoImg" :width="300" />
      <showImg2 :src="demoImg" :width="300" />
      <showImg2 :src="demoImg" :width="300" />
      <showImg2 :src="demoImg" :width="300" />
      <showImg2 :src="demoImg" :width="300" />
    </div>
  </div>
</template>
<script setup lang="ts">
import demoImg from "../assets/demoIMG.jpg";
import showImg2 from "../components/showImg2.vue";
</script>
<style scoped>
.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainBox {
  width: 1200px;
  height: 1200px;
  display: flex;
  border: 1px solid #000;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
</style>

GitHub 加速计划 / vu / vue

207.54 K

33.66 K

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：2 个月前 )

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前

e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m