vue实现图片按比例缩放问题操作


Posted in Javascript onAugust 11, 2020

如下所示:

getImg(src){
 var img_url =src
 var img = new Image()
 img.src=img_url
 this.pictureHeight.height = Math.ceil(img.height/img.width * 460)+'px'
},
//首先通过这个方法算出图片的高度/宽度比,460是我设置的宽度,计算得出需要的高度,然后修改容器的高
//度,图片通过height:100%;width:100%撑开,这样图片就不会失真了

vue里面还有一个问题,如果容器只是div的话,修改容器高度,非常简单,如果容器是一个element的插件的话,一般容器的样式都可以通过:style="styleModel"来绑定一个data中的属性styleModel:{height:100px;}这样的方式来修改,

当然如果遇到一些比较复杂的样式调整,也可以通过$refs来修改样式,,但是这样又会出现一个问题,就是$refs定位到的ref属性必须要组件完全加载完成后才能显示出来,所以一般会用this.$nextTick(function(){})的包装起来。

这个方法包装起来后的好处是,会在DOM更新完成后执行这里面的方法,这样就不用担心$refs获取不到的问题了。

this.$nextTick(function(){
  // this.$refs.test.$el.childNodes[0].style.height=this.pictureHeight.height
   document.getElementsByClassName('el-carousel__container')[0].style.height=this.pictureHeight.height
  })
 
//现在就是通过这两种比较通用的js方式来操作属性了

补充知识:vue实现图片放大的方法

一、v-viewer插件

首先,用命令行安装v-viewer插件:

npm install v-viewer --save

然后,在main.js中注册v-viewer插件,代码如下:

// 实现图片点击放大
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
 Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

注册完成后,就可以在组件中使用v-viewer插件了:

<template>
  <!-- imgArr是图片地址的数组,例: ['1.png','2.png'] -->
 <viewer :images="imgArr">
 <img v-for="src in imgArr" :src="src" :key="src" width="200">
 </viewer>
</template>

二、vue-directive-image-previewer插件

用命令行安装vue-directive-image-previewer插件:

npm install vue-directive-image-previewer -D

在main.js中注册:

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)

在组件中使用vue-directive-image-previewer插件:

<template>
 <div>
  <img v-image-preview src="123.png"/>
 </div>
</template>

以上这篇vue实现图片按比例缩放问题操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
动态控制Table的js代码
Mar 07 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
JavaScript中while循环的基础使用教程
Aug 11 #Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 #Javascript
js实现列表按字母排序
Aug 11 #Javascript
Vue使用轮询定时发送请求代码
Aug 10 #Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 #Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 #Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 #Javascript
You might like
php横向重复区域显示二法
2008/09/25 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
对python的文件内注释 help注释方法
2018/05/23 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
基于Django实现日志记录报错信息
2019/12/17 Python
opencv python图像梯度实例详解
2020/02/04 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
python switch 实现多分支选择功能
2020/12/21 Python
一份报关员的职业规划范文
2014/01/08 职场文书
淘宝活动总结范文
2014/06/26 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
小马王观后感
2015/06/11 职场文书
合同补充协议书
2016/03/24 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
Python OpenCV实现图形检测示例详解
2022/04/08 Python