Vue.js 使用Vuetify将内容集中在选项卡中_Vue.js_Vuetify.js

Vue.js 使用Vuetify将内容集中在选项卡中

vue.js

Vue.js 使用Vuetify将内容集中在选项卡中,vue.js,vuetify.js,Vue.js,Vuetify.js,我有v形标签来显示时间。我想在单击箭头后将时间居中但它不起作用。在下图中，我们可以看到时间没有对准中心。有一些css应用于它吗 <v-card class="mt-1 ml-1 mr-1 mb-0" v-if="item.vagas.length" > <v-tabs dark background-color="teal darken-3" show-arrows="a

我有v形标签来显示时间。我想在单击箭头后将时间居中

但它不起作用。在下图中，我们可以看到时间没有对准中心。有一些css应用于它吗

<v-card
  class="mt-1 ml-1 mr-1 mb-0"
  v-if="item.vagas.length"
>
<v-tabs
    dark
    background-color="teal darken-3"
    show-arrows="always"
    center-active
    centered
    height="30"
    v-model="tabHora"
>
 <v-tabs-slider color="teal lighten-3"></v-tabs-slider>
 <v-tab
  v-for="ob in item.vagas"
  :key="ob.id"
  @click="horaClicked(item, horario, ob)"
 >
  {{ ob.hora }}
 </v-tab>
</v-tabs>
</v-card>


{{ob.hora}}

在我开始回答之前，顺便说一句，您的代码中有一个错误-

show arrows=“always”

应该改为

show arrows

。现在来看我用

Vuetify.js

及其

v-tab

组件测试的内容

试验结果：

因此，我尝试了各种各样的

固定选项卡

增加

/css宽度，应用

v-flex

v-layouts

控制选项卡大小并对齐中心。。。没有成功。我似乎无法始终如一地控制

v-tab

组件及其

center-active

道具的行为，尤其是当浏览器大小从xl变为xs（即桌面变为手机）时。因此，对于您试图实现的目标，我建议您采用不同的方法，一种您能够针对不同浏览器大小进行一致控制的方法

建议（如果坚持使用导航箭头设计）：

如果这是您固定的设计，Vuetify将不容易让您实现这一点。Vuetify在移动到移动视图时依赖于项目/对象的分组。对于这种设计，我建议您使用下面的代码片段。需要注意的是，您必须对V形按钮进行编码（使用

@单击

）以选择不同的时间。您还可以应用以设置时间变化的动画

      <v-card flat dark>
        <v-layout row wrap align-center>
          <v-flex xs12 text-xs-center align-self-center>
            <v-card-text>
              <v-layout row align-center>
                <v-flex>
                  <v-btn
                    flat
                    icon
                    dark
                    color="success"
                  >
                    <v-icon>chevron_left</v-icon>
                  </v-btn>
                </v-flex>

                <v-flex>
                  <div class="title font-weight-light">
                    {{ testValue }}
                  </div>
                </v-flex>

                <v-flex>
                  <v-btn
                    flat
                    icon
                    dark
                    color="success"
                  >
                    <v-icon>chevron_right</v-icon>
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-card-text>
          </v-flex>
        </v-layout>
      </v-card>


雪佛龙左
{{testValue}}
雪佛龙右

建议（如果设计灵活）：

如果您希望继续使用Vuetify的标准组件，您可能必须采用他们使用组的方法，并可能探索其他组件，例如或（滚动至底部以查看居中的活动项）。

在我开始回答之前，您的代码中有一个错误btw-

show arrows=“always”

应改为显示箭头。现在来看我用

Vuetify.js

及其

v-tab