بعد تعيين textarea input في عنصر UI إلى Autosize ، يكون الارتفاع الافتراضي لمربع النص هو 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 ؛ .el-textarea {textarea {padding: 7.5px 0 7.5px 8px ؛ // فقط قم بتغيير الحشو هنا للتأثير على ارتفاع حجم الخط: $ inputFontsize ؛ خط الارتفاع: 21px ؛ }} لخصهذه هي نهاية هذه المقالة حول كيفية ضبط ارتفاع textarea autosize في عنصر واجهة المستخدم. لمزيد من محتوى TextArea AutoSize Element ، يرجى البحث عن المقالات السابقة من Wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!