时间戳

首页 > 解决方案 > Vue.js/Vuetify：如何使 v-card-actions 反应？

vue.js - Vue.js/Vuetify：如何使 v-card-actions 反应？

问题描述

我有 4 张卡片（第一行 3 张，第二行 1 张）。每次我调整浏览器窗口的大小时，我的v-card-actions内容都没有反应。在图片中，这是一切正常的时候：

前

这是我调整浏览器窗口大小的时候：

后

最后是我的代码：

.vue

<v-container
        grid-list-lg
    >
        <v-layout
            row
            wrap
        >
            <v-flex
                v-for="teacher in teachers"
                :key="teacher.firstName"
                md-4
                xs4
            >
                <v-card
                    flat
                    tile
                >
                    <v-img
                    :src='teacher.src'"
                    height="260px"
                    ></v-img>

                    <v-card-title
                        primary-title
                        class='blue--text'
                    >
                        Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
                    </v-card-title>

                    <v-card-text class='body-1'>
                         M.S at {{teacher.ms}} <br>
                         M.S.C at {{teacher.msc}}
                    </v-card-text>

                    <v-card-actions>

                        <v-btn
                            flat
                            small
                            color='indigo darken-4'
                        >
                            More
                        </v-btn>

                        <v-spacer></v-spacer>

                        <v-btn
                            flat
                            small
                            color='indigo darken-4'
                        >
                            Schedule an Appointment
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>

<script>

data() {
    return {
      teachers:[
        {firstName:'Jon', lastName:'Doe', specialty:'PE', ms:' University of Georgia',
         msc:'University of Georgia', src:'https://source.unsplash.com/kmuch3JGPUM'},
        {firstName:'Maria', lastName:'Doe', specialty:'Philology', ms:'University of Atlanta',
         msc:'University of Atlanta ', src:'https://randomuser.me/api/portraits/women/3.jpg'},
        {firstName:'Jon', lastName:'Jon', specialty:'Mathematics', ms:'University of Michigan',
         msc:'University of Michigan', src:'https://source.unsplash.com/Jy4ELSGPHTc'},
        {firstName:'Peter', lastName:'Xavier', specialty:'Mathematics',
         ms:'University of Miami', msc:'University of Miami',
         src:'https://randomuser.me/api/portraits/men/71.jpg'},
        {firstName:'Peter', lastName:'Miros', specialty:'Mathematics', ms:'University of Miami',
         msc:'Georgetown University', src:'https://randomuser.me/api/portraits/men/20.jpg'},
        }
      ]
  }

标签： vue.jsvuetify.js

解决方案

该<v-card-actions>元素确实会对浏览器宽度的变化做出反应。您看到的是 Vuetify<v-button>元素的一个问题，因为它（默认情况下）不会将文本换行以适应。

你有几个选择：

  1. 为您的按钮添加自定义 CSS 以适应我的喜好 - 棘手且有点过多的黑客攻击。
  2. 为此制作自己的按钮元素 - 似乎有点过头了，但是当我还希望按钮脱颖而出或看起来与 Vuetify 的标准不同时，我已经这样做了。
  3. 将您的按钮文本修改为更短 - 尝试使用“预订”或“约会”之类的词，如果您想看中，甚至可以根据屏幕大小修改文本（或更改为图标）。

就个人而言，我推荐选项3。

编辑：添加xs12 sm6 md4大小和一些小的格式更改以突出显示不同的元素

 <v-container grid-list-lg>
      <v-layout row wrap>
        <v-flex v-for="teacher in teachers" :key="teacher.firstName" xs12 sm6 md4>
          <v-card>
            <v-img :src="teacher.src" height="260px "></v-img>

            <v-card-title primary-title class='blue--text'>
              Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
            </v-card-title>

            <v-card-text class='body-1'>
              M.S at {{teacher.ms}} <br> M.S.C at {{teacher.msc}}
            </v-card-text>

            <v-card-actions>
              <v-btn outline color='blue'>
                More...
              </v-btn>
              <v-spacer></v-spacer>
              <v-btn outline color='green'>
                Appointments
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>

我已经对此进行了测试，并且没有低于 300 像素（v-card 的最小值）的尺寸，其中按钮看起来不太好。也为你做了一个codepen。

推荐阅读