vue實(shí)現(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'
},
//首先通過這個(gè)方法算出圖片的高度/寬度比，460是我設(shè)置的寬度，計(jì)算得出需要的高度，然后修改容器的高
//度，圖片通過height:100%;width:100%撐開，這樣圖片就不會(huì)失真了
vue里面還有一個(gè)問題，如果容器只是div的話，修改容器高度，非常簡單，如果容器是一個(gè)element的插件的話，一般容器的樣式都可以通過:style="styleModel"來綁定一個(gè)data中的屬性styleModel:{height:100px;}這樣的方式來修改，
當(dāng)然如果遇到一些比較復(fù)雜的樣式調(diào)整，也可以通過$refs來修改樣式，，但是這樣又會(huì)出現(xiàn)一個(gè)問題，就是$refs定位到的ref屬性必須要組件完全加載完成后才能顯示出來，所以一般會(huì)用this.$nextTick(function(){})的包裝起來。
這個(gè)方法包裝起來后的好處是，會(huì)在DOM更新完成后執(zhí)行這里面的方法，這樣就不用擔(dān)心$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方式來操作屬性了
補(bǔ)充知識(shí)：vue實(shí)現(xiàn)圖片放大的方法
一、v-viewer插件
首先，用命令行安裝v-viewer插件：
npm install v-viewer --save
然后，在main.js中注冊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" }
});
注冊完成后，就可以在組件中使用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實(shí)現(xiàn)圖片按比例縮放問題操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue之過濾器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助2021-11-11
這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應(yīng)高度的相關(guān)資料,Element UI的Table組件默認(rèn)情況下是沒有自適應(yīng)高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下2023-08-08
vue+uniapp瀑布流布局多種實(shí)現(xiàn)方式示例代碼
由于使用uniapp開發(fā)的微信小程序不需要考慮響應(yīng)式,因此瀑布流的實(shí)現(xiàn)相對于pc端更為簡單,下面這篇文章主要給大家介紹了關(guān)于vue+uniapp瀑布流布局多種實(shí)現(xiàn)方式的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue Router實(shí)現(xiàn)多層嵌套路由的導(dǎo)航的詳細(xì)指南
在 Vue 應(yīng)用中,使用 Vue Router 可以輕松實(shí)現(xiàn)多層嵌套路由的導(dǎo)航,嵌套路由允許你創(chuàng)建一個(gè)多層次的 URL 結(jié)構(gòu),這在構(gòu)建具有復(fù)雜導(dǎo)航結(jié)構(gòu)的應(yīng)用程序時(shí)非常有用,需要的朋友可以參考下2024-10-10
Element中el-tabs左右滑動(dòng)動(dòng)畫的實(shí)現(xiàn)
本篇博客將詳細(xì)介紹如何在使用 Vue 以及 Element UI 時(shí),實(shí)現(xiàn)一個(gè)具有左右滑動(dòng)效果的 tab 切換動(dòng)畫,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
利用Vue2.x開發(fā)實(shí)現(xiàn)JSON樹的方法
這篇文章主要給大家介紹了關(guān)于利用Vue2.x開發(fā)實(shí)現(xiàn)JSON樹的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Vue使用jsmind實(shí)現(xiàn)生成腦圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何使用jsmind實(shí)現(xiàn)生成腦圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-03-03
這篇文章主要介紹了Vue中子組件的顯示與隱藏方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
這篇文章主要為大家詳細(xì)介紹了vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05