Vue中使用v-viewer組件實現圖片預覽功能，支持Vue3

發布時間：2023-07-03 02:16:19 作者：網友整理

介紹

viewer.js是一個專門用于圖片預覽的js庫，圖片預覽效果很好，支持諸如縮放（支持滾輪操作）、旋轉、播放、左右翻轉、最大化等諸多使用功能，v-viewer則是對其進一步封裝，將它帶入到Vue組件中，使其方便地在我們的Vue項目中使用，并且支持Vue2和Vue3！

使用

本文以Vue3為例，在Vue3的項目中使用v-viewer

首先我們創建一個Vue3的項目

這里我們使用vite初始化我們的項目，用其內置模板創建（有關vite的相關知識，可以查看相關文檔），這里我們包管理工具使用yarn

yarn create @vitejs/App my-vue-app --template vue
//安裝相關依賴包(可以省略，下面安裝v-viewer的時候，也會自動安裝)
yarn

創建完成后，我們簡單做一個處理，刪掉components中的HelloWorld組件，重新建一個文件，叫ImageViewer.vue，同時我們也要改造一個App.vue,分別如下：

<template>
  <div></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ImageViewer",
  setup() {
    return {};
  },
});
</script>

<template>
  <ImageViewer></ImageViewer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import ImageViewer from "./components/ImageViewer.vue";
export default defineComponent({
  name: "App",
  components: { ImageViewer },
  setup() {
    return {};
  },
});
</script>

安裝v-viewer

同樣的，這里我們依舊使用yarn進行安裝v-viewer

yarn add v-viewer@next

然后啟動一下項目，檢查是否報錯

yarn dev

在沒問題后我們繼續，改造一下main.js

import { createApp } from "vue";
import App from "./App.vue";
import "viewerjs/dist/viewer.css";
import VueViewer from "v-viewer";
const app = createApp(App);
app.use(VueViewer);
app.mount("#app");

將準備好的圖片放在assets文件夾下用于測試

然后直接上代碼，將ImageViewer代碼替換如下

<template>
  <div class="wrap">
    <!-- 指定的方式使用 -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src" />
    </div>
    <!-- 組件的方式使用 -->
    <viewer :images="images">
      <img v-for="src in images" :key="src" :src="src" />
    </viewer>
    <!--外部觸發 -->
    <button type="button" @click="show">調用API</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import u1 from "../assets/1.jpg";
import u2 from "../assets/2.jpg";
import u3 from "../assets/3.jpg";
import u4 from "../assets/4.jpg";
export default defineComponent({
  data() {
    return {
      images: [u1, u2, u3, u4],
    };
  },
  methods: {
    show() {
      this.$viewerApi({
        images: this.images,
      });
    },
  },
});
</script>

<style scoped>
img {
  height: 200px;
}
</style>