Vuetify动态调整对话框容器尺寸问题求助

我正在尝试为Vuetify的对话框容器创建可动态调整尺寸的属性/方法，默认需要的结构是：

<v-flex xs12 md10>

我想通过变量属性在其他地方修改尺寸，但几次尝试都有问题：

• 最初用<v-flex xs12 v-model="tamanio_dialog">，组件props定义tamanio_dialog: ['md10']，调用时传:tamanio_dialog="md12"，尺寸生效但控制台报错“Property or method "md12" is not defined...”
• 更新props为tamanio_dialog: {type:String, default:'md10'}，尝试tamanio_dialog="md12"、tamanio_dialog="'md12'"、:tamanio_dialog="'md12'"等传参方式，父组件桌面端始终显示xs12而非预期的md10，对话框也只显示xs12
• 改用数字类型propsmdProp: {type: Number, default:10}，组件里写<v-flex xs12 :mdProp="mdProp">，调用传:mdProp="12"，结果生成flex xs12 mdProp类名，不符合要求
• 最后调整为<v-flex :md="mdProp">，调用传:mdProp="12"，但浏览器控制台显示类名为flex md，始终无法正确设置md尺寸

请问我哪里操作有误？

问题出在哪？怎么改？ #

1. 别用v-model绑定尺寸属性 #

v-model是专门给输入框、复选框这类表单控件做双向绑定的，不能用来绑Vuetify的v-flex尺寸。而且你把props定义成数组类型也完全没必要。

2. 别传完整的md12字符串 #

Vuetify的v-flex的md、xs这些属性，只需要传数字就行——比如你写<v-flex md10>，本质是给md属性传了10，组件自动拼出md10的类名。你直接传md12字符串，组件根本识别不了。

3. 自定义属性名没用 #

你写的:mdProp="mdProp"是自己造了个属性，但Vuetify不认识mdProp，所以直接把它当成类名输出了，自然不对。

4. 别漏了默认的xs12 #

最后一次尝试你只写了:md="mdProp"，但默认需要保留xs12，不然小屏幕下没有默认的宽度。

正确的做法： #

第一步：组件里定义数字类型的props

export default {
  props: {
    mdSize: {
      type: Number,
      default: 10 // 默认是md10
    }
  }
}

第二步：模板里绑定md属性，保留xs12

<v-flex xs12 :md="mdSize">
  <!-- 对话框内容放这 -->
</v-flex>

第三步：调用组件时传数字

• 默认用md10的话，直接调用就行：

<your-dialog-component></your-dialog-component>

• 要改成md12，就传数字12：

<your-dialog-component :mdSize="12"></your-dialog-component>

这样就能正确生成flex xs12 md10或者flex xs12 md12的类名，完美实现动态调尺寸。

要是想支持更多断点（比如sm、lg） #

可以多加点props：

props: {
  xsSize: { type: Number, default: 12 },
  smSize: { type: Number, default: 12 },
  mdSize: { type: Number, default: 10 },
  lgSize: { type: Number, default: 8 }
}

模板对应改成：

<v-flex :xs="xsSize" :sm="smSize" :md="mdSize" :lg="lgSize">

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