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


Posted in Javascript onJuly 31, 2020

项目需求,嵌到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="imgPath" :width="width" :height="height" @click="stopEvent" id='img' />
 </div>
 </div>
 <div class="handleImg_box">
 <div @click="prevOne"><img src="../../../../static/img/prev.png" /></div>
 <div @click="rotate(0)"><img src="../../../../static/img/turn_left.png" /></div>
 <div @click="rotate(1)"><img src="../../../../static/img/turn_right.png" /></div>
 <div @click="nextOne"><img src="../../../../static/img/next.png" /></div>
 </div>
 </div>
</template>
<script>
 export default {
 name: 'seeAttachment',
 props: ['filesLists', 'file'],
 data: function() {
 return {
 imgPath: '',
 width: 0,
 height: 0,
 imgIndex: 0
 }
 },
 mounted() {
 this.getImgIndex();
 this.seeAttachment(this.imgIndex);
 },
 computed: {
 //去掉不是图片的附件
 imgList() {
 const ARR = ["png", "PNG", "jpeg", "JPEG", "bmp", "BMP", "jpg", "JPG", "gif", "GIF"];
 let arrs = '';
 let suffix = '';
 let type = '';
 let newList = [];
 this.filesLists.forEach((item) => {
  arrs = item.name.split('.');
  suffix = arrs[arrs.length - 1];
  type = item.type ? item.type : item.raw ? item.raw.type : suffix;
  ARR.some(items => {
  if (type.includes(items)) {
  newList.push(item)
  }
  })
 })
 return newList;
 }
 },
 methods: {
 //通过父组件传入的file获取当前查看的图片index
 getImgIndex() {
 let that = this;
 that.imgList.forEach((item, index) => {
  if(that.file.id == item.id){
  that.imgIndex = index;
  }
 })
 },
 //?藏查看?D片
 hideMask() {
 this.$emit('hideMask', false);
 },
 stopEvent(event) {
 //阻止冒泡事件
 //取消事件冒泡
 let e = event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容
 if (e && e.stopPropagation) {
  e.stopPropagation();
 } else if (window.event) {
  window.event.cancelBubble = true;
 }
 },
 //上一??
 prevOne() {
 if (this.imgIndex == 0) {
  return false;
 }
 let img = document.getElementById('img')
 img.style.transform = 'rotate(0deg)';
 this.imgIndex = this.imgIndex - 1;
 this.seeAttachment(this.imgIndex);
 },
 //下一??
 nextOne() {
 let listLength = this.imgList.length - 1;
 if (this.imgIndex >= listLength) {
  return false;
 }
 let img = document.getElementById('img')
 img.style.transform = 'rotate(0deg)';
 this.imgIndex = this.imgIndex + 1;
 this.seeAttachment(this.imgIndex);
 },
 //右转
 rotate(t) {
 let img = document.getElementById('img')
 var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i;
 var wt = img.style['-webkit-transform'],
  wts = wt.match(reg);
 var $3 = RegExp.$3;
 var current = $3 ? parseInt($3) : 0;
 if (t == 0) {
  current = current == 0 ? 360 : current;
  current = (current - 90) % 360;
 } else {
  current = (current + 90) % 360;
 }
 img.style.transform = 'rotate(' + current + 'deg)';
 },
 seeAttachment(index = 0) {
 if (this.imgList.length == 0) {
  return false;
 }
 let that = this;
 let basePath = "http://" + (process.env.OSS_PATH.indexOf("test") == -1 ? "opyx-mtds-pro" :
  "opyx-mtds-test") + ".oss-cn-shenzhen.aliyuncs.com/";
 that.imgPath = basePath + that.imgList[index]['path'];
 let img_url = basePath + that.imgList[index]['path'];
 // 创建对象
 var img = new Image();
 // 改变图片的src
 img.src = img_url;
 // 定时执行获取宽高
 var check = function() {
  // 只要任何一方大于0 
  // 表示已经服务器已经返回宽高 
  if (img.width > 0 || img.height > 0) {
  let wdt = document.body.offsetWidth;
  let hgt = document.body.offsetHeight;
  let ratio = 1;
  if (img.width > img.height && img.width > wdt * ratio) {
  img.height = img.height * wdt * ratio / img.width;
  img.width = wdt * ratio;
  console.log('宽大于高', img)
  } else if (img.height > img.width && img.height > hgt * ratio) {
  img.width = img.width * hgt * ratio / img.height;
  if (img.width > wdt) {
  img.width = wdt;
  }
  img.height = hgt * ratio;
  console.log('高大于宽', img)
  } else {
  img.height = img.height * wdt * ratio / img.width
  img.width = wdt * ratio
  console.log('正常', img)
  }
  that.width = img.width;
  that.height = img.height;
  clearInterval(set);
  }
 };
 var set = setInterval(check, 40);
 },
 }
 }
</script>
<style lang="scss" scoped>
 .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;
 }
</style>

补充知识:vue图片放大、缩小、旋转等。仅需要两行代码!!!

效果图

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="item.publicFileURL" @click="aaa(item)" >

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

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

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

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

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

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

Javascript 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
extjs fckeditor集成代码
May 10 Javascript
YUI模块开发原理详解
Nov 18 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 #Javascript
简单了解JavaScript作用域
Jul 31 #Javascript
基于vue--key值的特殊用处详解
Jul 31 #Javascript
javascript开发实现贪吃蛇游戏
Jul 31 #Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 #Javascript
vscode中Vue别名路径提示的实现
Jul 31 #Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
JS定时关闭窗口的实例
2013/05/22 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
js实现扫雷源代码
2020/11/27 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
对Python3中的input函数详解
2018/04/22 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
商场促销活动方案
2014/02/08 职场文书
说明书格式及范文
2014/05/07 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
出售房屋委托书范本
2014/09/24 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
国王的演讲观后感
2015/06/03 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书