文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在Vuetify中隐藏其他组件后，展开卡片组件并将其居中

问在Vuetify中隐藏其他组件后，展开卡片组件并将其居中
EN

Stack Overflow用户
提问于 2020-02-02 02:08:25
回答 3查看 320关注 0票数 0

我创建了一个按钮，用于隐藏页面上除一个组件之外的其他组件，然后展开左侧的组件，然后将其移动到中心位置。但是，在单击按钮后，组件不会以某种方式在中心对齐。

这是当前行为的codepen。

​

代码语言：javascript
复制
new Vue({
  el: '#app',
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`,
    show1: true,
    show2: true,
    show3: true,
    show4: true,
    show5: true,
    expand1:true
    
  }),
  methods: {
    hideothers() {
        this.show2=!this.show2,
        this.show3=!this.show3,
        this.show4=!this.show4,
        this.show5=!this.show5,
        this.expand1=!this.expand1
                 }
  }
})
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap>
<!-- top starts here-->
        <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="orange lighten-2" tile flat v-show="show1"> 
            <v-card-text>Card 1</v-card-text>
             <v-btn flat  @click="hideothers()">Expand</v-btn>
             <v-card-text>
                  <v-expand-transition>
                    <div v-show="expand1">This is a short paragraph</div>
                  </v-expand-transition>
                  <v-expand-transition>
                    <div v-show="!expand1">
                      <p>A looooong</p>
                      <p>paragraph</p>
                    </div>
                  </v-expand-transition>
                </v-card-text>
          </v-card>
        </v-flex>
        
         <v-flex d-flex xs12 sm4 child-flex>
           <v-fade-transition>
             
           
          <v-card color="orange lighten-2" tile flat v-show="show2">
            <v-card-text>
            <v-layout row wrap>
              <v-flex sm6>
                 Card1
              </v-flex>
              <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
            </v-layout>
            </v-card-text>
          </v-card>
             </v-fade-transition>
        </v-flex>

        <v-flex d-flex xs12 sm4>
          <v-card color="red lighten-2" dark tile flat v-show="show3">
            <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
          </v-card>
        </v-flex>
  <!-- TOP part ends here-->     
        
         <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="purple lighten-1" tile flat v-show="show4">
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 sm4 child-flex v-show="show5">
          <v-card color="green lighten-2" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        
       
      </v-layout>
    </v-container>
  </v-app>
</div>

​

javascript
css
vue.js
vuetify.js
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-02-02 02:48:48

基本上更改以下行

代码语言：javascript
复制
<v-flex xs12 sm4 child-flex v-show="show2" :class="{ 'd-flex': show2 }">

仅在显示d-flex类时应用d-flex类，并在参数为false时隐藏此div

还要将justify-content: center CSS添加到所有5个div的包装器中。

请参阅更新后的codepen

​

代码语言：javascript
复制
new Vue({
  el: '#app',
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`,
    show1: true,
    show2: true,
    show3: true,
    show4: true,
    show5: true,
    expand1: true

  }),
  methods: {
    hideothers() {
      this.show2 = !this.show2,
        this.show3 = !this.show3,
        this.show4 = !this.show4,
        this.show5 = !this.show5,
        this.expand1 = !this.expand1
    }
  }
})
代码语言：javascript
复制
.custom-class {
  justify-content: center;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.22/dist/vuetify.min.css">

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap :class="{ 'custom-class': !show2 }">
<!-- top starts here-->
        <v-flex d-flex xs12 sm4 child-flex v-show="show1">
          <v-card color="orange lighten-2" tile flat > 
            <v-card-text>Card 1</v-card-text>
             <v-btn flat  @click="hideothers()">Expand</v-btn>
             <v-card-text>
                  <v-expand-transition>
                    <div v-show="expand1">This is a short paragraph</div>
                  </v-expand-transition>
                  <v-expand-transition>
                    <div v-show="!expand1">
                      <p>A looooong</p>
                      <p>paragraph</p>
                    </div>
                  </v-expand-transition>
                </v-card-text>
          </v-card>
        </v-flex>
        
         <v-flex xs12 sm4 child-flex v-show="show2" :class="{ 'd-flex': show2 }">
           <v-fade-transition>
             
           
          <v-card color="orange lighten-2" tile flat  v-show="show2">
            <v-card-text>
            <v-layout row wrap>
              <v-flex sm6>
                 Card1
              </v-flex>
              <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
            </v-layout>
            </v-card-text>
          </v-card>
             </v-fade-transition>
        </v-flex>

        <v-flex xs12 sm4 v-show="show3" :class="{ 'd-flex': show3 }">
          <v-card color="red lighten-2" dark tile flat  v-show="show3">
            <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
          </v-card>
        </v-flex>
  <!-- TOP part ends here-->     
        
         <v-flex xs12 sm4 child-flex v-show="show4" :class="{ 'd-flex': show4 }">
          <v-card color="purple lighten-1" tile flat v-show="show4">
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 sm4 child-flex v-show="show5"  :class="{ 'd-flex': show2 }">
          <v-card color="green lighten-2" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
       
      </v-layout>
    </v-container>
  </v-app>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2020-02-02 02:34:13

试试你这样做：

代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap :justify-center="!expand1">
<!-- top starts here-->
        <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="orange lighten-2" tile flat v-show="show1"> 
            <v-card-text>Card 1</v-card-text>
             <v-btn flat  @click="hideothers()">Expand</v-btn>
             <v-card-text>
                  <v-expand-transition>
                    <div v-show="expand1">This is a short paragraph</div>
                  </v-expand-transition>
                  <v-expand-transition>
                    <div v-show="!expand1">
                      <p>A looooong</p>
                      <p>paragraph</p>
                    </div>
                  </v-expand-transition>
                </v-card-text>
          </v-card>
        </v-flex>

         <v-flex d-flex xs12 sm4 child-flex v-if="show2">
           <v-fade-transition>


          <v-card color="orange lighten-2" tile flat>
            <v-card-text>
            <v-layout row wrap>
              <v-flex sm6>
                 Card1
              </v-flex>
              <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
            </v-layout>
            </v-card-text>
          </v-card>
             </v-fade-transition>
        </v-flex>

        <v-flex d-flex xs12 sm4 v-if="show3">
          <v-card color="red lighten-2" dark tile flat>
            <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
          </v-card>
        </v-flex>
  <!-- TOP part ends here-->     

         <v-flex d-flex xs12 sm4 child-flex v-if="show4">
          <v-card color="purple lighten-1" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 sm4 child-flex v-show="show5">
          <v-card color="green lighten-2" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>


      </v-layout>
    </v-container>
  </v-app>
</div>
票数 0
EN

Stack Overflow用户

发布于 2020-02-02 02:58:47

无论是否展开，都可以绑定所需的宽度md4和md12。像这样：<v-flex d-flex xs12 :sm4="expand1" :sm12="!expand1" child-flex>

see the pen

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/60019736

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档