مربع حوار Dialog

مربع حوار شرطي. لا يوجد Teleport في Vue2: تُركَّب الطبقة المنبثقة على body عند mounted (بتموضع fixed)، ويحتفظ المكوّن باتصاله التفاعلي الكامل؛ ويمكن التحكم في الإغلاق عبر النقر على القناع / ESC / زر الإغلاق / beforeClose، مع دعم السحب وقفل التمرير.

مربع حوار

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="basic = true">حوار أساسي</LhButton>
      <LhButton @click="center = true">position="center" في الوسط</LhButton>
      <LhButton @click="bottom = true">position="bottom" أسفل</LhButton>
      <LhButton @click="full = true">fullscreen ملء الشاشة</LhButton>
      <LhButton @click="drag = true">draggable قابل للسحب</LhButton>
      <LhButton @click="strict = true">منع الإغلاق بالقناع/Esc</LhButton>
      <LhButton @click="guard = true">اعتراض beforeClose</LhButton>
      <LhButton @click="noClose = true">showClose=false</LhButton>
    </div>
    <LhDialog v-model="basic" title="نقش ختامي" width="420px" :top="top" :z-index="2000">
      <p style="margin: 0">يُركَّب مربع الحوار على body، وكل من القناع والمحتوى بتموضع fixed. يتحكم top في المسافة من الأعلى، وzIndex في الطبقة.</p>
      <template #footer>
        <LhButton @click="basic = false">إلغاء</LhButton>
        <LhButton type="primary" @click="basic = false">توقيع</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="center" title="حوار في الوسط" position="center" width="360px" center>
      <p style="margin: 0">يوسّط position="center" عموديًا؛ ويجعل center العنوان والأزرار السفلية في المنتصف.</p>
      <template #footer>
        <LhButton type="primary" @click="center = false">حسنًا</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="bottom" title="حوار سفلي" position="bottom" width="480px">
      <p style="margin: 0">يلتصق position="bottom" بالأسفل، ومناسب لألوحة عمليات الجوّال.</p>
    </LhDialog>
    <LhDialog v-model="full" title="تصفّح ملء الشاشة" fullscreen>
      <p style="margin: 0">يملأ fullscreen إطار العرض كله، ويتكيّف محتوى المنطقة مع الارتفاع المتبقي.</p>
      <template #footer>
        <LhButton type="primary" @click="full = false">إغلاق</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="drag" title="اسحب من شريط العنوان" draggable width="420px">
      <p style="margin: 0">بعد تفعيل draggable، اضغط على شريط العنوان لسحب النافذة.</p>
    </LhDialog>
    <LhDialog
      v-model="strict"
      title="الوضع الصارم"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="true"
    >
      <p style="margin: 0">closeOnClickModal وcloseOnPressEscape معطّلان، وlockScroll يوقف تمرير الصفحة، ولا يبقى للإغلاق إلا الأزرار.</p>
      <template #footer>
        <LhButton type="primary" @click="strict = false">هذا المخرج الوحيد</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="guard" title="اعتراض قبل الإغلاق" width="400px" :before-close="beforeClose">
      <p style="margin: 0">يعترض beforeClose محاولة الإغلاق، ولا يتم الإغلاق فعليًا إلا باستدعاء done() (هنا عرض لتأكيد ثانٍ).</p>
    </LhDialog>
    <LhDialog v-model="noClose" title="بدون زر إغلاق" width="360px" :show-close="false">
      <p style="margin: 0">يخفي showClose=false زر الإغلاق في الزاوية العلوية.</p>
      <template #footer>
        <LhButton type="primary" @click="noClose = false">إغلاق</LhButton>
      </template>
    </LhDialog>
  </div>
</template>

<script>
export default {
  data: () => ({
    basic: false,
    center: false,
    bottom: false,
    full: false,
    drag: false,
    strict: false,
    guard: false,
    noClose: false,
    top: '15vh',
  }),
  methods: {
    beforeClose(done) {
      if (window.confirm('هل تريد إغلاق مربع الحوار هذا؟')) done()
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	الإظهار والإخفاء (model: modelValue/input؛ ويتوافق أيضا مع الاستخدام القياسي لـ v-model بخلاف :visible.sync)	boolean	false
title	العنوان	string	''
width	العرض	string \| number	'480px'
position	الموضع	'top' \| 'center' \| 'bottom'	'center'
center	توسيط العنوان والأزرار السفلية	boolean	false
fullscreen	ملء الشاشة	boolean	false
showClose	عرض زر الإغلاق	boolean	true
closeOnClickModal / closeOnPressEscape	الإغلاق بالقناع / بـ ESC	boolean	true
draggable	السحب من الرأس (مقيد بحدود إطار العرض)	boolean	false
lockScroll	قفل تمرير body	boolean	true
beforeClose	اعتراض قبل الإغلاق، واستدعاء done() للإغلاق الفعلي	(done) => void	—
top	المسافة من الأعلى (يسري مع position=top)	string	'15vh'
zIndex / themeVars / bgPattern / sx	الطبقة وتجاوزات السمة	—	—

Events

حدث	الوصف	معامل الاستدعاء
input	مزامنة إظهار/إخفاء v-model	boolean
open	بدء الفتح (دخول الانتقال)	—
opened	انتهاء الفتح (اكتمال الانتقال)	—
close	بدء الإغلاق (خروج الانتقال)	—
closed	انتهاء الإغلاق (اكتمال الانتقال)	—

Slots

فتحة	الوصف
default	النص الأساسي
header	عنوان مخصص
footer	منطقة العمليات السفلية

الطرق

طريقة	الوصف
close()	إغلاق مربع الحوار
isVisible	هل هو ظاهر حاليًا (defineExpose)