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之過濾器，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助2021-11-11
這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應高度的相關(guān)資料,Element UI的Table組件默認情況下是沒有自適應高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下2023-08-08
vue+uniapp瀑布流布局多種實現(xiàn)方式示例代碼
由于使用uniapp開發(fā)的微信小程序不需要考慮響應式,因此瀑布流的實現(xiàn)相對于pc端更為簡單,下面這篇文章主要給大家介紹了關(guān)于vue+uniapp瀑布流布局多種實現(xiàn)方式的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue Router實現(xiàn)多層嵌套路由的導航的詳細指南
在 Vue 應用中,使用 Vue Router 可以輕松實現(xiàn)多層嵌套路由的導航,嵌套路由允許你創(chuàng)建一個多層次的 URL 結(jié)構(gòu),這在構(gòu)建具有復雜導航結(jié)構(gòu)的應用程序時非常有用,需要的朋友可以參考下2024-10-10
Element中el-tabs左右滑動動畫的實現(xiàn)
本篇博客將詳細介紹如何在使用 Vue 以及 Element UI 時,實現(xiàn)一個具有左右滑動效果的 tab 切換動畫,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-03-03
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
利用Vue2.x開發(fā)實現(xiàn)JSON樹的方法
這篇文章主要給大家介紹了關(guān)于利用Vue2.x開發(fā)實現(xiàn)JSON樹的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
這篇文章主要為大家詳細介紹了Vue如何使用jsmind實現(xiàn)生成腦圖,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-03-03
這篇文章主要介紹了Vue中子組件的顯示與隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
這篇文章主要為大家詳細介紹了vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05