vuetify 在运行时更改 flex 大小

Question

我创建了一个 v-component 就像这样：

<v-container grid-list-md >
  <v-layout row wrap>
      <v-flex xs10>

所以现在我可以在运行时将示例的 xs10 更改为 xs5（我有 2 个面板，每个面板中有一个文本字段，因此当我的用户关注第一个面板中的文本时，我需要将他的大小 xs6 增加到 xs8 并减小从 xs6 到 xs4 的另一个面板用于示例

Answer 1

你可以这样控制flexsize

<v-flex :xs10="true" :xs5="false">

因此您可以创建一个名为 firstPanelFocus 的新数据，例如，

 data() {
    return {
      firstPanelFocus: false
    };
  },

以及 v-flex

<v-flex :xs10="!firstPanelFocus" :xs5="firstPanelFocus">

每当用户关注（或模糊）某个区域时更改 firstPanelFocus 的值

Answer 2

从 Vue 2.6 (Macross) 开始，您可以使用 动态指令参数 !

例如：

<v-flex :[dynamicFlex]="true">
  Some Text
</v-flex>

并且在 vue 实例中：

export default {
  data: () => ({
    dynamicFlex: 'xs12'
  })
}

可以找到完整的工作示例代码here

vuetify change flex size in runtime