حقل إدخال Input

إدخال نصي أحادي السطر ومتعدد الأسطر. يدعم البادئة واللاحقة، والمسح، وعدّ الأحرف، وقطع maxlength، والربط مع التحقق من النموذج.

أشكال حقل الإدخال

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="text" placeholder="يرجى إدخال المحتوى" clearable name="title" />
      <LhInput v-model="text" prefix-icon="search" suffix-icon="close" placeholder="أيقونات بادئة ولاحقة" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="secret" type="password" placeholder="كلمة المرور" autocomplete="new-password" />
      <LhInput v-model="text" readonly placeholder="للقراءة فقط" />
      <LhInput v-model="text" disabled placeholder="حالة معطّلة" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap; align-items: center">
      <LhInput v-model="text" size="small" placeholder="small" />
      <LhInput v-model="text" size="medium" placeholder="medium" />
      <LhInput v-model="text" size="large" placeholder="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="poem" type="textarea" :rows="2" placeholder="نص متعدد الأسطر (rows=2)" resize="vertical" />
      <LhInput v-model="poem" type="textarea" autosize placeholder="ارتفاع أسطر متكيّف" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="limited" :maxlength="20" show-word-limit placeholder="عدّاد الأحرف" />
      <LhInput v-model="text" label="تسمية عائمة" placeholder="متنافية مع placeholder" />
    </div>
    <p class="demo-note">القيمة الحالية: {{ text || '(فارغ)' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({ text: '', secret: '', poem: '', limited: '' }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	القيمة المرتبطة (model: modelValue/input)	string	—
type	نوع عنصر التحكم	'text' \| 'textarea' \| 'password' \| …	'text'
size	الحجم	'small' \| 'medium' \| 'large'	'medium'
placeholder	نص العنصر النائب، يُؤخَذ من حزمة اللغة عند غيابه	string	t('input.placeholder')
clearable	إظهار زر المسح	boolean	false
prefixIcon / suffixIcon	أيقونتان أمامية وخلفية، تأخذان اسم أيقونة من LhIcon المُدمج	string	—
maxlength / minlength	حدّان أصليان للطول	number	—
showWordLimit	إظهار عدّاد الأحرف (يتطلب maxlength)	boolean	false
autosize	ارتفاع أسطر متكيّف لـ textarea	boolean \| {minRows,maxRows}	false
disabled / readonly	تعطيل / للقراءة فقط	boolean	false
autofocus	تركيز تلقائي عند التركيب	boolean	false
autocomplete	autocomplete أصلي	string	'off'
nativeType	type أصلي (يعمل عند type=text)	string	'text'
resize	اتجاه مقبض تحجيم textarea	'none' \| 'both' \| 'horizontal' \| 'vertical'	—
name / form	سمتا name / form الأصليتان	string	—
tabindex	tabindex أصلي	number \| string	—
inputStyle	تنسيق مضمَّن لعنصر الإدخال	Record<string, string>	—
label	تسمية عائمة (متنافية مع placeholder)	string	—
themeVars / bgPattern / sx	تجاوز السمة	—	—

Events

حدث	الوصف	معامل الاستدعاء
input	حدث v-model	(val, e)
change	يُطلق عند تغيّر القيمة	—
focus	يُطلق عند اكتساب التركيز	—
blur	يُطلق عند فقدان التركيز	—
clear	يُطلق عند المسح	—
keydown	يُطلق عند ضغط مفتاح	—

الربط مع النموذج

عند وضعه داخل LhFormItem وفشل التحقق، يحمل عنصر التحكم الأصلي aria-invalid="true" تلقائياً.