Saya mahu mencipta medan teks dalam vuetify

Question

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

Saya ingin mencipta medan teks dalam vuetify, tetapi butang tidak boleh dibuat seperti ini? Dan ketinggian, tetapi ia tidak boleh diubah? Dah cuba tukar ketinggian banyak kali tapi tak berkesan

Saya sudah mempunyai css tetapi sukar untuk digunakan di 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

Perkara yang serupa boleh dilakukan seperti ini:

...

  
    
    Check
  


...

LihatKodPen ini

Banyak gaya boleh disesuaikan dalam vuetify melalui props. Tetapi secara lalai, vuetify diilhamkan oleh Reka Bentuk Bahan, dan bertentangan dengan contoh anda, menyesuaikan gaya lalai bukanlah semudah itu. Untuk kes anda mungkin lebih baik menggunakan beberapa tema vuetify sebelum menggunakan pustaka ini.

Answer 2

Pernyataan Masalah: Ingin mencipta medan teks dengan butang dalam Vuetify.

Penyelesaian:

HTML:

Vue.js:

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

Output: