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