Question

我在xs的{{1}}，sm，md，lg和xl指令中找不到任何适当的引用验证。如果我想要两列采用超小型布局，三列采用小型布局，四列采用中等布局，六列采用大型布局，而12列采用超大型布局，那么这是正确的HTML吗？

v-flex

Answer 1

该属性的数字部分是指v-flex在12列布局中将跨越的列数。因此，xs1将是12列中的1列，而xs12将是12列中的12列。

这是一个视觉演示。

new Vue({
  data() {
    return {
      cols: 12
    }
  },
  el: '#app',
  methods: {
    color() {
      return this.hexToRgb(Math.random().toString(16).substr(2, 6))
    },
    hexToRgb(hex) {
      var bigint = parseInt(hex, 16);
      var r = (bigint >> 16) & 255;
      var g = (bigint >> 8) & 255;
      var b = bigint & 255;

      return r + "," + g + "," + b;
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-content>
      <v-container fluid grid-list-md>
        <v-layout row wrap>
          <template v-for="c in cols">
            <v-flex v-for="i in Math.floor(cols/c)" :key="`${c}-${i}`" :class="`xs${c} text-xs-center`" :style="{ backgroundColor: `rgba(${color()},.4)` }">
              <b>xs{{ c }}</b>
            </v-flex>
          </template>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

Vuetify v-flex宽度规格

1 个答案: