Vue implements a method to dynamically adjust the update component size when the window is adjusted

need:

1. The size of some elements of the page needs to be set according to the browser size when it is actually opened;

2. After the page is opened, you need to dynamically adjust the size of some elements when adjusting the browser window;

Points to note:

Reference triggers can only be performed in one place in the project. If reference triggers are performed in multiple places, only 1 trigger event will take effect.

The solution to "multiple components need to be triggered" can only be triggered through one place and then triggered through communication between components.

(Take the example of adjusting the width of the div with class as myDiv)

Solution to solve Requirement 1:

html

<template>
 <div class="example">
  <div class='myDiv' v-bind:style="{width: myWidth}"></div>
 </div>
</template>

script

<script>
 export default {
  // Ignore the rest and don't write it  data () {
   return {
    myWidth: ( - 500) + 'px'
   }
  }
 }
</script>

After setting above, the value of myWidth will be calculated dynamically when the page is opened (the string attribute is spliced ​​with 'px')

Then bind this value to the div we need to set by using the v-bind:style=”{width: myWidth}” assignment, and requires 1 to complete.

Because this value is bound when loading the page, it is a fixed value. Then during use, if the user operates to adjust the size of the browser window, then the trigger event should be triggered to change this value to make the component have the effect of dynamic adjustment. This is Requirement 2:

Solution to solve Requirement 2:

html

<template>
 <div class="example">
  <div class='myDiv' v-bind:style="{width: myWidth}"></div>
 </div>
</template>

script

<script>
 export default {
  // Ignore the rest and don't write it  data () {
   return {
    myWidth: ( - 500) + 'px'
   }
  },
  mounted () {
   // Note: Only triggered once in the project    = function windowResize () {
    // Trigger the event we need to execute by capturing the system's onresize event     = ( - 500) + 'px';
   }
  }
 }
</script>

Points to note:

Reference triggers can only be performed in one place in the project. If reference triggers are performed in multiple places, only 1 trigger event will take effect.

The solution to "multiple components need to be triggered" can only be triggered through one place and then triggered through communication between components.

The above article Vue triggers events when adjusting the window size. The method of dynamically adjusting the update component size is the editor who shares it with you. I hope you can give you a reference and I hope you can support me more.