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_05_原型继承原理
Oct 13 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
js生成随机数方法和实例
Jan 17 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
Python的动态重新封装的教程
2015/04/11 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
销售实习自我鉴定
2013/12/07 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
爱情寄语大全
2014/04/09 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS