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 相关文章推荐
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
Vue分页效果与购物车功能
Dec 13 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
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
javascript新手语法小结
2008/06/15 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
母亲节演讲稿范文
2014/01/02 职场文书
京剧自荐信
2014/01/26 职场文书
新员工试用期自我评价
2015/03/10 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB