หลังจากตั้ง textarea input ในองค์ประกอบ UI เพื่อปรับความสูงความสูงเริ่มต้นของกล่องข้อความคือ 33 ซึ่งไม่สอดคล้องกับการออกแบบ
สไตล์เริ่มต้น
查检องค์ประกอบในเบราว์เซอร์และค้นหา
ความสูง ถูกควบคุมโดย height และ min-height ของ textarea ในกล่อง ตำแหน่งของข้อความในกล่อง ถูกควบคุมโดย padding
ปรับเปลี่ยน height และ padding ของกล่องข้อความโดยตรงเพื่อดูว่ามันใช้งานได้หรือไม่
เพิ่มใน全局样式:
$ inputheight: 38px; $ inputfontsize: 16px; .el-textarea {textarea {padding: 8px; // ตั้งค่าความสูงของช่องว่าง: $ inputheight; // ตั้งค่าตัวอักษรความสูง: $ inputfontsize; ความสูงของสาย: 21px; -หลังจากแก้ไขแล้วฉันก็พบว่า:
ที่น่าสนใจคือ height ของกล่องข้อความนี้ถูกควบคุมโดยสไตล์อินไลน์
เผชิญกับปัญหานี้ฉันพยายามสองครั้ง
!สำคัญ ตั้งค่า height เป็น !important ความสูงมีการเปลี่ยนแปลง แต่ไม่สามารถขยายได้โดยอัตโนมัติ
-> ยอมแพ้
mytextarea เขียนส่วนประกอบ textarea ด้วยตัวเองเพื่อให้สไตล์สามารถเปลี่ยนแปลงได้ตามความประสงค์ แต่เพื่อใช้文本框随内容扩展คุณต้องเขียน JS จำนวนมากซึ่งมีราคาแพงไปหน่อย
-> ไม่ต้องการใช้
ช่องว่างภายในกำหนดความสูง ในระหว่างกระบวนการดีบักพบว่าความสูงเริ่มต้นของ autosize textarea ใน Element UI จะเปลี่ยนไปตามค่า padding
ดังนั้นฉันจึงปรับขนาดของ padding ในเบราว์เซอร์จนกว่าความสูงที่รองรับจะสอดคล้องกับความสูงที่จำเป็นใน figma
จากนั้นเปลี่ยน padding ในสไตล์โลกเป็นค่าที่สอดคล้องกัน
$ InputFontSize: 16PX; // เพียงแค่เปลี่ยนช่องว่างที่นี่เพื่อส่งผลกระทบต่อความสูงของ Textarea font-size: $ inputfontsize; ความสูงของสาย: 21px; -สรุป
นี่คือจุดสิ้นสุดของบทความนี้เกี่ยวกับวิธีการตั้งค่าความสูงสำหรับ textarea autosize ในองค์ประกอบ UI สำหรับองค์ประกอบที่เกี่ยวข้องเพิ่มเติม UI AutoSize เนื้อหา textarea โปรดค้นหาบทความก่อนหน้าจาก wulin.com หรือดำเนินการเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!