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

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

父组件代码

子组件代码

 .handleImg_box {
 position: fixed;
 bottom: 0;
 left: 50%;
 z-index: 100;
 margin-left: -150px;
 width: 300px;
 padding: 1rem 0;
 display: flex;
 align-items: center;
 justify-content: space-around;
 }
 
 .handleImg_box div {
 font-size: 0;
 }
 
 .handleImg_box div img {
 width: 3rem;
 }

补充知识：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

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

4.@click="aaa(item)"方法

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

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