我想在 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

類似的事情可以這樣完成：

...

  
    
    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)
    }
  }
})

輸出：