Ich möchte ein Textfeld in vuetify erstellen

Question

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

Ich möchte ein Textfeld in vuetify erstellen, aber der Button lässt sich nicht so gestalten? Und die Höhe, aber sie lässt sich nicht ändern? Ich habe viele Male versucht, die Höhe zu ändern, aber es funktioniert nicht

Ich habe das CSS bereits, aber es ist schwierig, es auf vuetify zu verwenden

.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

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

...

  
    
    Check
  


...

看看这个CodePen

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

Answer 2

问题陈述：想要在 Vuetify 中创建带有按钮的文本字段。

解决方案：

HTML：

Vue.js：

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

输出：