时间戳

首页 > 解决方案 > Vuetify v-btn 和 v-input 在 v-card-action 区域的布局

html - Vuetify v-btn 和 v-input 在 v-card-action 区域的布局

问题描述

我需要一些帮助来对齐一些 v-btn 和 v-input。我正在尝试创建一个记录导航控件，我需要它在水平中间对齐。我所拥有的是在此处输入图像描述

而我需要的是在此处输入图像描述

我的代码是

          <v-card-action>  
              <v-layout row d-flex class="text-center">
                <div class="my-15 ml-15 text-center">                     
                  <v-btn
                    class="ma-2"
                    text
                    round
                    color="primary"
                    @click="navChange('first')"
                  >First</v-btn>
                  <v-btn
                    class="ma-2"
                    text
                    round
                    color="primary"
                    @click="navChange('previous')"
                  >Previous</v-btn>
                  <v-text-field width="10px" v-model="recordNav" class="centered-input"></v-text-field>

                  <v-btn class="ma-2" text round color="primary" @click="navChange('next')">Next</v-btn>
                  <v-btn class="ma-2" text round color="primary" @click="navChange('last')">Last</v-btn>
                </div>
                <div class="my-15"></div>                  
              </v-layout>                
            </v-card-action>

并有一些codepen代码

https://codepen.io/morgenweck/pen/yLLdydN

我是 Vue 的新手，似乎某些标准 HTML 代码在 v-card-action 区域中的工作方式不同。感谢所有帮助。

标签： htmlvue.jsvuetify.js

解决方案

我已经改进了布局以更符合您的目标。

主要问题是：

  • 开始标签中的拼写错误——actionsv-card-actions是复数
  • 将flex-direction按钮容器的设置为no-wrap（我替换v-row为使用道具）
  • 该道具在按钮上已弃用，因此我们现在round需要使用rounded
  • 移除text道具，这样我们就可以得到按钮的药丸形状和背景颜色

我还在按钮上设置了一个定义width，因此它们的大小都相同，并在按钮容器上添加了左右填充。

我建议以全屏方式查看代码段，这样您就不会看到控制台消息很显眼。

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    //
    recordNav: "Record: 1 of 15"
  })
  
})
.centered-input input {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.1.11/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.11/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-row align="center" justify="center">
      <v-card>
        <v-card-actions>  
          <v-row row d-flex nowrap align="center" justify="center" class="px-2">
            <v-btn
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('first')"
            >First</v-btn>
            <v-btn
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('previous')"
            >Previous</v-btn>
            <v-text-field width="10px" v-model="recordNav" class="centered-input"></v-text-field>

            <v-btn 
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('next')"
            >Next</v-btn>
            <v-btn
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('last')"
            >Last</v-btn>
            
            <div class="my-15"></div>                  
          </v-row>                
        </v-card-actions>
      </v-card>
    </v-row>
  </v-app>
</div>

推荐阅读