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操作URL函数修改版
Nov 07 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
详解Vue之计算属性
Jun 20 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微信模板消息操作示例
2017/06/29 PHP
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
jQuery div拖拽用法实例
2016/01/14 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
Python基于PycURL实现POST的方法
2015/07/25 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
非功能性需求都包括哪些方面
2013/10/29 面试题
工厂厂长的职责
2013/12/12 职场文书
军神教学反思
2014/02/04 职场文书
党校学习自我鉴定
2014/02/24 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
校园广播稿精选
2014/10/01 职场文书
毕业设计致谢词
2015/05/14 职场文书
专项资金申请报告
2015/05/15 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
实操Python爬取觅知网素材图片示例
2021/11/27 Python