vue3 中使用图片播放器

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

1. 安装

---

npm install v-viewer@next     

2. 引入使用
   在main.js中

import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'

createApp(App).use(store).use(VueViewer).use(router).mount('#app')

3. 组件中使用

<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>

关注我。持续更新前端知识