如何根据Vuetify中的屏幕尺寸更改按钮的位置

Question

我正在寻找一种方法，可以根据使用Vuetify屏幕的大小来更改按钮的位置，该按钮应位于右下角。

this is the position of the button on a large screen

This is the position on a smaller screen

Answer 1

您可以使用“断点”，这将允许您根据视口大小来应用特定的属性。

export default {  
  computed: {
    position () {
      switch (this.$vuetify.breakpoint.name) {
        case 'xs': return 'your position'
        case 'sm': return 'your position'
        case 'md': return 'your position'
        case 'lg': return 'your position'
        case 'xl': return 'your position'
      }
    }
  }
}

Answer 2

就像第一个答案一样，您必须使用断点。这是一个例子。

<v-flex xs12 md6 class="text-xs-right">
    <v-btn :block="$vuetify.breakpoint.xsOnly" flat>Cancel</v-btn>
    <v-btn :block="$vuetify.breakpoint.xsOnly" color="primary" @click="onSave()">Save</v-btn>
</v-flex>