vue Realizes Picture Scale Problem Operation

As shown below:

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'
},
// First, calculate the height of the picture by this method / Width ratio, 460 Is the width I set, calculate the required height, and then modify the height of the container 
// Degree, the picture passes height:100%;width:100% Spread it so that the picture won't be distorted 

There is another problem in vue. If the container is only div, it is very simple to modify the height of the container. If the container is a plug-in of element, all the styles of the container can be bound to the attribute styleModel in data by: style= "styleModel": {height: 100px;} To modify in this way,

Of course, if you encounter some complicated style adjustments, you can also modify the style through $refs, but there will be another problem, that is, the ref attribute positioned by $refs must be completely loaded before it can be displayed, so 1 will be wrapped in this. $nextTick (function () {}).

The advantage of wrapping this method is that it will be executed after the DOM update is completed, so there is no need to worry about the problem that $refs is not available.

  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
  })
 
// Now it is through these two more common js Mode to manipulate attributes 

Supplementary knowledge: vue method to realize picture enlargement

1. v-viewer plug-in

First, install the v-viewer plug-in on the command line:

npm install v-viewer --save

Then, register the v-viewer plug-in in main. js with the following code:

//  Realize click enlargement of pictures 
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" }
});

After registration, you can use the v-viewer plug-in in the component:

<template>
  <!-- imgArr Is an array of picture addresses, for example:  ['1.png','2.png'] -->
 <viewer :images="imgArr">
 <img v-for="src in imgArr" :src="src" :key="src" width="200">
 </viewer>
</template>

2. vue-directive-image-previewer plug-in

Install the vue-directive-image-previewer plug-in from the command line:

npm install vue-directive-image-previewer -D

Register in main. js:

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)

Use the vue-directive-image-previewer plug-in in the component:

<template>
 <div>
  <img v-image-preview src="123.png"/>
 </div>
</template>