Setelah mengatur textarea input dalam elemen UI untuk mengotosialisasi, ketinggian default kotak teks adalah 33 , yang tidak sesuai dengan desain.
Gaya default
查检elemen di browser dan temukan
Ketinggian dikendalikan oleh height dan min-height textarea di dalam kotak. Posisi teks dalam kotak dikendalikan oleh padding .
Langsung memodifikasi height dan padding kotak teks untuk melihat apakah berfungsi
Tambahkan全局样式:
$ inputheight: 38px; $ inputFontSize: 16px; .el-textArea {textarea {padding: 8px; // atur tinggi padding: $ inputheight; // atur ukuran font tinggi: $ inputFontSize; Line-Height: 21px; }}Setelah merevisinya, saya menemukan itu:
Menariknya, height kotak teks ini dikendalikan oleh gaya inline.
Menghadapi masalah ini, saya melakukan dua upaya
!penting Setel height ke !important , tinggi telah berubah, tetapi tidak dapat secara otomatis berkembang
-> menyerah
MyTextArea Tulis sendiri komponen textarea , sehingga gaya dapat diubah sesuka hati, tetapi untuk mengimplementasikan文本框随内容扩展, Anda harus menulis banyak JS, yang agak mahal
-> tidak disukai penggunaan
padding menentukan ketinggian Selama proses debugging, ditemukan bahwa ketinggian awal dari autosize textarea di Element UI akan berubah dengan nilai padding .
Jadi, saya menyesuaikan ukuran padding di browser sampai ketinggiannya mendukung konsisten dengan ketinggian yang dibutuhkan di figma
Kemudian ubah padding dalam gaya global ke nilai yang sesuai
$ inputFontSize: 16px; .el-textarea {textarea {padding: 7.5px 0 7.5px 8px; // Ubah saja padding di sini untuk mempengaruhi ketinggian ukuran font tekstara: $ inputFontSize; Line-Height: 21px; }} MeringkaskanIni adalah akhir dari artikel ini tentang cara mengatur ketinggian untuk Autosize TextArea di elemen UI. Untuk elemen lain terkait UI Autosize Konten TextArea, silakan cari artikel sebelumnya dari wulin.com atau terus menelusuri artikel yang relevan di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!