Vuetify3：关于两组件并列刷新变成两行并非一行问题，满足响应式

dingcho

已于 2024-07-12 00:28:53 修改

阅读量1.3k

点赞数 55

分类专栏：前端文章标签：前端 javascript html vue两组件并列响应式 Vuetify3两组件并列 vtify两组件并列满足响应式

于 2024-07-01 01:52:05 首次发布

本文链接：https://blog.csdn.net/yao_guai/article/details/140001161

版权

前端专栏收录该内容

86 篇文章 0 订阅

订阅专栏

我们在使用vuetify3 开发站点的时候，我们需要两个组件并排，而且需要满足响应式：

那我们如何解决这个问题呢？

我们在开发的时候，一开始我们直接使用官方提供的弹性布局直接上代码：

<template>
  <v-sheet class="d-flex flex-wrap bg-surface-variant">
    <v-sheet class="flex-1-0 ma-2 pa-2">
        <Search></Search>
    </v-sheet>
    <v-sheet class="ma-2 pa-2">
        <Banner></Banner>
    </v-sheet>
  </v-sheet>
</template>

结果出现个问题，热编译后是正常，左右一个组件，但是刷新之后布局就乱了。那这个时候想想应该是长度没有设置的问题，但这种写法，轮播宽度设置之后，居然是无效的。而且也满足不了我们响应式需求。然后我们就使用官方提供的另外一种方式：网格系统

<v-row align="center" justify="center" dense>
    <v-col cols="12" md="6"> 
        <Search></Search>
    </v-col>
    <v-col cols="12" md="6">
        <Banner></Banner>
    </v-col>
</v-row>

修改实现方式之后刷新，是正常的，是我们需要的结果，其中我们需要注意的是在编写组件的时候需要设置下最大宽度(max-with)。但是我们需要在 v-main 显示，需要和其它组件对其，我们就需要嵌套 v-list ：

<template>
    <v-list>
        <v-list-item>
            <v-row align="center" justify="center" dense>
                <v-col cols="12" md="6"> 
                    <Search></Search>
                </v-col>
                <v-col cols="12" md="6">
                    <Banner></Banner>
                </v-col>
            </v-row>
        </v-list-item>
    </v-list>
</template>

最终，效果178校园网