vue實現(xiàn)圖片按比例縮放問題操作
更新時間：2020年08月11日 08:58:55 作者：爪哇倫
這篇文章主要介紹了vue實現(xiàn)圖片按比例縮放問題操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
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;}這樣的方式來修改，
當然如果遇到一些比較復雜的樣式調(diào)整，也可以通過$refs來修改樣式，，但是這樣又會出現(xiàn)一個問題，就是$refs定位到的ref屬性必須要組件完全加載完成后才能顯示出來，所以一般會用this.$nextTick(function(){})的包裝起來。
這個方法包裝起來后的好處是，會在DOM更新完成后執(zhí)行這里面的方法，這樣就不用擔心$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
})
//現(xiàn)在就是通過這兩種比較通用的js方式來操作屬性了
補充知識：vue實現(xiàn)圖片放大的方法
一、v-viewer插件
首先，用命令行安裝v-viewer插件：
npm install v-viewer --save
然后，在main.js中注冊v-viewer插件，代碼如下：
// 實現(xiàn)圖片點擊放大
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是圖片地址的數(shù)組，例： ['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實現(xiàn)圖片按比例縮放問題操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文通過實例代碼給大家介紹了vue實現(xiàn)底部菜單功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了vue中倒計時組件的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
jdk1.8+vue elementui實現(xiàn)多級菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實現(xiàn)多級菜單功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue中實現(xiàn)圖片壓縮 file文件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue.config.js打包優(yōu)化配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
在 Vue 中,append-to-body=“true” 主要用于一些第三方組件（如 Element UI 或 Ant Design Vue 中的彈出框、下拉菜單等）來控制組件的掛載位置,本文介紹Vue中控制組件的掛載位置,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要給大家介紹了關(guān)于前端Uniapp使用Vant打造Uniapp項目避坑的相關(guān)資料,Uniapp結(jié)合Vant可以快速構(gòu)建跨平臺移動應用,通過HBuilderX安裝和配置Vant組件,解決了樣式識別問題,并實現(xiàn)了組件的全局注冊,需要的朋友可以參考下2024-11-11
本篇文章主要介紹了詳解從新建vue項目到引入組件Element的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Vue axios獲取token臨時令牌封裝案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
在許多應用程序中，我們經(jīng)常需要執(zhí)行定期的異步任務輪詢，本文就介紹了Vue3如何處理異步任務輪詢，感興趣的可以了解一下2023-05-05