https://www.npmjs.com/package/v-viewer 插件地址

安裝

---

npm install v-viewer@next

引入使用
在main.js中

import 'viewerjs/dist/viewer.css' import VueViewer from 'v-viewer'createApp(App).use(store).use(VueViewer).use(router).mount('#app')

組件中使用

<template><viewer :images="images" @inited="inited"><img v-for="src in images" :key="src" :src="src" /></viewer><!--通過按鈕點擊預覽 --><button @click="show">click me! open show!</button> </template><script setup> import { ref } from "vue"; const images = ref(["https://picsum.photos/200/200","https://picsum.photos/300/200","https://picsum.photos/250/200", ]); const viwerInstace = ref(null); const inited = (value) => {viwerInstace.value = value; }; const show = () => {viwerInstace.value.show(); }; </script><style></style>

關注我。持續更新前端知識

總結

以上是生活随笔為你收集整理的vue3 中使用图片播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。