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

Question

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

我想在 vuetify 中创建一个文本字段，但是不能这样制作按钮？和高度，但它不能改变吗？我试了好几次改高度都没用

我已经有了 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>

Answer 1

问题陈述：想在 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)
    }
  }
})

输出：

Answer 2

类似的事情可以这样完成：

...
<v-container>
  <v-layout wrap class="parent-box common">
    <v-text-field
       class="text-field__styled"
       outlined
       rounded
       dense
       color="#26376B"
       placeholder="Chassis Number"
       height="27"
       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 inspired by Material Design in contrast to your example，自定义默认样式并不是那么容易。在使用这个库之前应用一些 vuetify 主题可能会更好。

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

I want to create a text field in vuetify

css

vue.js

nuxt.js

vuetify.js