vuetifyでテキストフィールドを作成したい

Question

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

vuetifyでテキストフィールドを作りたいのですが、このようにボタンを作ることはできないのでしょうか？それと高さですが、変更できないのでしょうか？高さを何度も変更しようとしましたが、うまくいきません

CSS はすでにありますが、vuetify で使用するのは難しいです

ああああ

Answer 1

同様のことは次のように行うことができます:

...

  
    
    ＃＃＃チェック＃＃＃
  


...


.parent-box {
  背景: #26376B;
  幅: 400ピクセル;
}

。一般 {
  概要: なし。
  境界半径: 20px;
}

.text-field__styled {
  背景: #fff;
}

.btn__styled {
  色: #fff;
  幅: 100ピクセル;
}

.v-text-field .v-input__control .v-input__slot {
  min-height: 自動 !重要;
  表示: フレックス !重要;
  align-items: 中央に配置 !重要;
}
見てください

このコードペン

vuetify では props

を介して多くのスタイルをカスタマイズできます。ただし、デフォルトでは、vuetify はマテリアル デザインからインスピレーションを得ており、例とは対照的に、デフォルトのスタイルをカスタマイズするのはそれほど簡単ではありません。あなたの場合、このライブラリを使用する前に vuetify テーマを適用する方が良いかもしれません。

Answer 2

問題ステートメント: Vuetify でボタン付きのテキスト フィールドを作成したいと考えています。

＃＃＃＃＃＃解決：＃＃＃＃＃＃

HTML：

  
          
          
            見せる
            
          
        
      
        
    
Vue.js：
新しい Vue({
  el: "#アプリ",
    vuetify: 新しい Vuetify()、
  データ： {
    入力: ''
  }、
  メソッド: {
    見せる（）{
      アラート(this.input)
    }
  }
})

出力: