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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
解决await在forEach中不起作用的问题
Feb 25 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实现图片转换成ASCII码的方法
2015/04/03 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
微信小程序实现左右列表联动
2020/05/19 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
python实现猜拳小游戏
2020/04/05 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
网上书店创业计划书
2014/01/12 职场文书
大学生入党思想汇报
2014/01/14 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
《问银河》教学反思
2014/02/19 职场文书
成龙洗发水广告词
2014/03/14 职场文书
开展创先争优活动总结
2014/08/28 职场文书
美术教师个人总结
2015/02/06 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA