vue实现简易图片左右旋转,上一张,下一张组件案例

网络编程 2024/12/23 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

项目需求，嵌到elementUi里的小组件，写得不好，不喜勿喷，谢谢

父组件代码

<template>
 <div>
 <see-attachment :filesLists='files' :file='imgFile' v-if="showmask" @hideMask='showmask=false'></see-attachment>
 </div>
</template>
<script>
 import seeAttachment from "./seeAttachment.vue";
 export default {
 data() {
 return {
 showmask: false,
 imgFile: {}
 };
 },
 components: {
 seeAttachment
 },
 methods: {
 lookImg(f) {
 this.showmask = true;
 this.imgFile = f;
 },
 }
 };
</script>

子组件代码

<template>
 <div>
 <div class="proview_box" @click="hideMask">
 <div class="img_box">
 <img :src="/UploadFiles/2021-04-02/imgPath">

补充知识：vue图片放大、缩小、旋转等。仅需要两行代码！！！
效果图

实现步骤：
1.下载Viewer组件

npm install v-viewer --save

2.在图片显示的页面引用 viewer组件（一个js文件，一个css样式文件）

import Viewer from "@/assets/js/viewer.min.js";
import '@/assets/css/viewer.min.css';

3.再需要点击图片的标签添加点击事件@click

<img :id ="item.publicFileURL" :src="/UploadFiles/2021-04-02/item.publicFileURL">


说明：因为我的图片是在集合中存的需要动态的点击放大（点哪个放大哪个）----id很重要 aaa()方法中要用
4.@click="aaa(item)"方法


  aaa(item) {
   var viewer = new Viewer(document.getElementById(item.publicFileURL), {
    url: item.publicFileURL,
  });
 },



以上这篇vue实现简易图片左右旋转,上一张,下一张组件案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。