自定义点击图片显示大图bigImg组件！只需几步！满足各种场景需要！

2024-02-04 06:15:51

剖析自定义大图组件bigImg

我最近在开发一个需要展示大量图片的项目，在开发中我遇到了一个问题，如何让用户在点击图片时显示一张更大的图片？

为了解决这个问题，我决定创建一个自定义的Vue3组件，这个组件可以让我轻松地将大图显示功能添加到我的项目中。

以下是我创建这个组件的步骤：

1. 创建一个新的Vue3项目

首先，我使用Vue CLI创建了一个新的Vue3项目。

vue create vue-big-img

2. 安装依赖

接下来，我安装了必要的依赖项。

npm install --save vue-click-outside

3. 创建组件

然后，我创建了一个名为BigImg的新组件。

// src/components/BigImg.vue

<template>
  <div class="big-img-wrapper">
    <img :src="bigImgUrl" alt="Big image">
    <button @click="close">Close</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import ClickOutside from 'vue-click-outside'

export default {
  name: 'BigImg',
  components: {
    ClickOutside
  },
  setup() {
    const bigImgUrl = ref(null)
    const show = ref(false)

    const open = (url) => {
      bigImgUrl.value = url
      show.value = true
    }

    const close = () => {
      show.value = false
    }

    return {
      bigImgUrl,
      show,
      open,
      close
    }
  }
}
</script>

<style>
.big-img-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.big-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.big-img-wrapper button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
}
</style>

4. 注册组件

然后，我将BigImg组件注册到我的Vue实例中。

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import BigImg from './components/BigImg.vue'

const app = createApp(App)

app.component('BigImg', BigImg)

app.mount('#app')

5. 使用组件

最后，我可以在我的模板中使用BigImg组件了。

<template>
  <div id="app">
    <BigImg :big-img-url="bigImgUrl"></BigImg>

    <button @click="showBigImg">Show big image</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const bigImgUrl = ref(null)

    const showBigImg = () => {
      bigImgUrl.value = 'https://picsum.photos/1200/800'
    }

    return {
      bigImgUrl,
      showBigImg
    }
  }
}
</script>