我想在 vuetify 中创建一个文本字段

Posted 2023-02-22

【中文标题】我想在 vuetify 中创建一个文本字段

【英文标题】：I want to create a text field in vuetify

【发布时间】：2022-01-21 20:15:57

【问题描述】：

https://i.stack.imgur.com/zbCfI.png

但是按钮不能这样制作？和高度，但它不能改变吗？试了好几次改高度都不行

我已经有了 css，但是在 vuetify 上很难用

.parent-box
  width:fit-content;
  background:#26376B;

.text-box
  border:1px solid #CACACA;
  padding:5px 10px;
  min-width:300px;

.btn
  padding:5px 20px;
  width:100px;
  color:#fff;
  border:none;
  background-color:#26376B;
  cursor:pointer;

.common
  outline:none;
  border-radius:50px;


<div class="parent-box common">
  <input class="text-box common" type="text" placeholder="Chassis Number">
  <button class="btn common">Check</button>
</div>

【问题讨论】：

只是好奇，你为什么要使用 Vuetify 组件？图像中的输入和按钮不符合 Material Design 原则。你可以在这里阅读更多信息：material.io/components

这能回答你的问题吗？ Place Button with input text with css

【参考方案1】：

类似的事情可以通过这种方式完成：

...
<v-container>
  <v-layout wrap class="parent-box common">
    <v-text-field
       class="text-field__styled"
       outlined
       rounded
       dense
       color="#26376B"
       placeholder="Chassis Number"
       
       hide-details
    ></v-text-field>
    <button class="btn__styled">Check</button>
  </v-layout>
</v-container>

...

<style>
.parent-box 
  background: #26376B;
  width: 400px;


.common 
  outline: none;
  border-radius: 20px;


.text-field__styled 
  background: #fff;


.btn__styled 
  color: #fff; 
  width: 100px;


.v-text-field .v-input__control .v-input__slot 
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;

</style>

看看this CodePen。

在 vuetify 中可以通过 props 自定义许多样式。但是与您的示例相比，默认情况下 vuetify 受 Material Design 启发，并且自定义默认样式并不容易。在您的情况下，在使用这个库之前应用一些 vuetify 主题可能会更好。

【参考方案2】：

问题说明：想在Vuetify中创建带有按钮的文本字段。

解决方案：

html：

<v-app id="app">

  <v-container>
  
    <v-text-field
      label="Chassis Number"
      color="primary"
      v-model="input"
      @keypress.enter="show">
  
       <template v-slot:append>
  
          <v-btn
            depressed 
            tile
            color="primary"
            class="ma-0"
            @click="show">
          
            show
            
          </v-btn>
        
      </template>
        
    </v-text-field>
      
  </v-container>
  
</v-app>

Vue.js：

new Vue(
  el: "#app",
    vuetify: new Vuetify(),
  data: 
    input: ''
  ,
  methods: 
    show()
      alert(this.input)
    
  
)

输出：

【讨论】：

请注意您的格式。您收到了社区成员的多次反对票，因为在我进行编辑之前，您无法阅读完整的解决方案。