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 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
javascript封装简单实现方法
Aug 11 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
React服务端渲染原理解析与实践
Mar 04 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/01/24 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
js function定义函数使用心得
2010/04/15 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
python pygame实现2048游戏
2018/11/20 Python
python实现飞机大战游戏
2020/10/26 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
新闻报道策划方案
2014/06/11 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
大学毕业生个人总结
2015/02/28 职场文书
签字仪式主持词
2015/07/03 职场文书
会计专业自荐信范文
2019/05/22 职场文书