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 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
javascript实现点击产生随机图形
Jan 25 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
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
python实现狄克斯特拉算法
2019/01/17 Python
python命令行工具Click快速掌握
2019/07/04 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python线程中的同步问题及解决方法
2019/08/29 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python小白学习包管理器pip安装
2020/06/09 Python
python math模块的基本使用教程
2021/01/16 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
森林病虫害防治方案
2014/06/02 职场文书
个人主要事迹材料
2014/08/26 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
汶川大地震感悟
2015/08/10 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书