时间戳

首页 > 解决方案 > Vuetify - 列的断点

javascript - Vuetify - 列的断点

问题描述

我有一个基于 Vue.js/Vuetify.js 的简单 SPA。主页包含按列布局排列的多张卡片。现在卡片的宽度增长到列的宽度。我想使用断点xs10或sm8设置大小响应。然而，这些断点似乎既不能用作属性xs10，也不能用作 CSS 类class="xs10"。奇怪的想法是，如果我改用行布局，它们似乎就像一种魅力......但我希望每行只有一张卡片居中，而不是增长到全宽......

main.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(Vuetify);

new Vue({
  render: h => h(App)
}).$mount('#app')

应用程序.vue

<template>
    <v-container fluid>
        <v-layout column>
            <v-flex xs10>
                <v-card color="red">
                    <v-card-title>Test</v-card-title>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
export default {
  name: 'App'
}
</script>

索引.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
    <title>App</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
      <div id="app"></div>

    <!-- built files will be auto injected -->
  </body>
</html>

如何以响应的方式缩小列布局中弹性框/卡片的大小？断点似乎无法正常工作...

编辑

下图显示了问题，卡片增长到布局/列宽并忽略所有断点...

屏幕转储

标签： javascripthtmlcssvue.jsvuetify.js

解决方案

我喜欢使用 switch 语句来控制断点的大小。这是您可以使用的 Codepen 链接： Dynamic Sizing for Breakpoints

    <v-container grid-list-md text-xs-center>
        <v-layout column align-center>
            <v-flex>
                <v-card color="red" :width='cardWidth'>
                    <v-card-title>{{ text }}</v-card-title>
                </v-card>
            </v-flex>
             <v-flex>
                <v-card color="blue" :width='cardWidth'>
                    <v-card-title>{{ text }}</v-card-title>
                </v-card>
            </v-flex>
             <v-flex>
                <v-card color="yellow" :width='cardWidth'>
                    <v-card-title>{{ text }}</v-card-title>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>

const vm = new Vue({
  el: '#app',
  data () {
    return {
      text: 'I want just one card per row centered and not growing to full width'
    }
  },
  computed: {
     cardWidth() {
            switch (this.$vuetify.breakpoint.name) {
                case "xs":
                    return "250px";
                case "sm":
                    return "350px";
                case "md":
                    return '600px';
                case "lg":
                    return '800px';
                case "xl":
                    return "1080px";
            }
        },
  },
})

推荐阅读