Vuetify运行时动态调整Flex尺寸的实现方法咨询

Changing xs10 to xs5 at Runtime #

Absolutely! Vuetify’s grid system plays perfectly with Vue’s reactive data binding. Instead of hardcoding xs10, you can bind the xs prop to a reactive variable in your component. Here’s how to do it:

Step-by-Step Implementation: #

1. Add a reactive variable to your component’s data to track the flex size:

export default {
  data() {
    return {
      currentFlexSize: 10 // Start with xs10
    };
  }
};

2. Bind this variable to the xs prop of your v-flex component:

<v-container grid-list-md>
  <v-layout row wrap>
    <v-flex :xs="currentFlexSize">
      <!-- Your component content here -->
    </v-flex>
  </v-layout>
</v-container>

3. Update the variable whenever you need to change the size (e.g., on a button click, API response, or any runtime event):

// Example: Switch to xs5 when a button is clicked
this.currentFlexSize = 5;

Vue will automatically re-render the component with the new flex size as soon as the variable updates.

Two-Panel Size Adjustment on Textbox Focus #

For your second scenario, we can use a reactive flag to track focus state, then conditionally adjust the xs sizes of both panels. Here’s a complete, clean implementation:

Full Component Code: #

<template>
  <v-container grid-list-md>
    <v-layout row wrap>
      <!-- First Panel -->
      <v-flex :xs="isFirstInputFocused ? 8 : 6">
        <v-text-field
          label="First Textbox"
          @focus="isFirstInputFocused = true"
          @blur="isFirstInputFocused = false"
        ></v-text-field>
      </v-flex>

      <!-- Second Panel -->
      <v-flex :xs="isFirstInputFocused ? 4 : 6">
        <v-text-field label="Second Textbox"></v-text-field>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      isFirstInputFocused: false // Tracks if first textbox is focused
    };
  }
};
</script>

How It Works: #

• The @focus event on the first textbox sets isFirstInputFocused to true, triggering the size shift: first panel becomes xs8, second becomes xs4.
• The @blur event resets the flag to false, reverting both panels back to their original xs6 size.
• The ternary operator :xs="isFirstInputFocused ? 8 : 6" dynamically applies the correct flex size based on the focus state.

If you need more complex size logic later, you can swap the ternary for a computed property—this approach just keeps things simple for the use case you described.

内容的提问来源于stack exchange，提问作者Fabio Ebner