Popconfirm (تأكيد منبثق)

فقاعة خفيفة للتأكيد الثانوي، بديلة لتفاعل التأكيد على شكل مربع حوار. ثلاث نبرات، والأزرار قابلة للتخصيص.

تأكيد منبثق

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm title="تأكيد حذف هذا السجل؟" @confirm="onOk">
        <LhButton type="danger">حذف</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="نبرة تحذير" type="warning" placement="top" @confirm="onOk">
        <LhButton type="warning">warning</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="نبرة خطر" type="danger" placement="right" @confirm="onOk">
        <LhButton type="danger">danger يمين</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="تشغيل hover" trigger="hover" placement="bottom" @confirm="onOk">
        <LhButton>hover أسفل</LhButton>
      </LhPopconfirm>
    </div>
    <p class="demo-note">نصّا أزرار مخصّصان ونوعاهما / بدون أيقونة / تموضع صارم</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm
        title="أزرار مخصّصة"
        confirm-text="بالطبع"
        cancel-text="لأفكّر مجدداً"
        confirm-button-type="primary"
        placement="left"
        @confirm="onOk"
      >
        <LhButton>أزرار مخصّصة</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="بدون أيقونة نبرة" :show-icon="false" placement="top" @confirm="onOk">
        <LhButton>showIcon=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="تموضع صارم عند top" placement="top" :flip="false" @confirm="onOk">
        <LhButton>flip=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="معطّل" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopconfirm>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onOk() {
      LhMessage.success('تم التأكيد')
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
type	نبرة التأكيد	'info' \| 'warning' \| 'danger'	'info'
placement	موضع الظهور	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	هل تنقلب الجهة عند عدم كفاية المساحة على المحور الرئيسي (مفعّل افتراضياً)؛ ضعه false ليلتزم placement بصرامة مع السماح بالخروج عن إطار العرض	boolean	true
trigger	طريقة التشغيل	'click' \| 'hover' \| 'focus' \| 'manual'	'click'
title	محتوى التأكيد (يمكن أيضاً استخدام فتحة content)	string	—
confirmText	نص زر التأكيد (يُؤخَذ من حزمة اللغة popconfirm.confirm عند غيابه)	string	—
cancelText	نص زر الإلغاء (يُؤخَذ من حزمة اللغة popconfirm.cancel عند غيابه)	string	—
confirmButtonType	نوع زر التأكيد	'default' \| 'primary'	'primary'
visible	حالة الإظهار المُتحكَّم بها يدوياً (:visible.sync)	boolean	—
disabled	هل معطّل	boolean	false
showIcon	هل تُظهر أيقونة النبرة	boolean	true
popperClass	صنف CSS مخصّص للطبقة المنبثقة	string	—
teleportTarget	هدف تركيب الطبقة المنبثقة (مُحدِّد أو عنصر، افتراضياً body؛ لا يوجد Teleport في 2.7، يُنفَّذ بنقل المضيف)	string \| HTMLElement	—
showAfter	زمن تأخير الإظهار (ms)	number	—
hideAfter	زمن تأخير الإخفاء (ms)	number	—
themeVars	متغيّرات السمة على مستوى المكوّن، تتجاوز إعدادات ConfigProvider	Record<string, string>	—
bgPattern	نقش خلفية على مستوى المكوّن، يتجاوز إعدادات ConfigProvider	string	—
sx	خصائص تخطيط سريعة عبر sx (تؤثر على العنصر الجذر للمُشغِّل)	—	—

Events

حدث	الوصف	معامل الاستدعاء
confirm	النقر على زر التأكيد	—
cancel	النقر على زر الإلغاء	—

Slots

فتحة	الوصف
default	المُشغِّل
content	محتوى التأكيد (افتراضياً يُؤخَذ من الخاصية title)