Popconfirm 气泡确认框

用于危险操作的再次确定

基础用法

通过 trigger 插槽来定义触发器内容,width 设置气泡确认框宽度

主动设置宽度很重要，可以避免一些溢出或换行，对页面美化很关键

这将是一个危险操作，确定继续？

<template>
  <div class="flex flex-col gap-4 items-center">
    <Popconfirm
      title="这将是一个危险操作，确定继续？"
      :width="200"
      confirm-text="确定"
      cancle-text="取消"
      @confirm="handleConfirm"
      @cancle="handleCancle"
    >
      <template #trigger>
        <button class="btn btn-sm btn-outline btn-warning">删除</button>
      </template>
    </Popconfirm>
  </div>
</template>

<script setup lang="ts">
import { Popconfirm, Notification } from 'li-daisy'

const handleConfirm = () => {
  Notification.success({
    title: '操作成功',
    message: '成功删除',
  })
}

const handleCancle = () => {
  Notification.info({
    title: '取消操作',
    message: '刚刚点错了',
  })
}
</script>

自定义内容

通过 title 和 action 插槽分别自定义提示文字和按钮，用于满足自定义需求

action 插槽可以解构出 onConfirm, onCancle 事件，用于自定义触发处理

Are you sure to delete?

<template>
  <div class="flex flex-col gap-4 items-center">
    <Popconfirm :width="200" position="bottom" @confirm="handleConfirm" @cancle="handleCancle">
      <template #trigger>
        <button class="btn btn-sm btn-outline btn-warning">自定义</button>
      </template>
      <template #title>
        <p class="font-serif">Are you sure to delete?</p>
      </template>
      <template #action="{ onConfirm, onCancle }">
        <div class="flex items-center justify-end gap-x-5">
          <button class="btn btn-primary btn-sm btn-dash btn-circle" @click="onConfirm">√</button>
          <button class="btn btn-secondary btn-sm btn-dash btn-circle" @click="onCancle">×</button>
        </div>
      </template>
    </Popconfirm>
  </div>
</template>

<script setup lang="ts">
import { Popconfirm, Notification } from 'li-daisy'

const handleConfirm = () => {
  Notification.success({
    title: '操作成功',
    message: '成功删除',
  })
}

const handleCancle = () => {
  Notification.info({
    title: '取消操作',
    message: '刚刚手滑了',
  })
}
</script>

位置

位置可选值同 Popover 组件

Popconfirm 组件的位置和 popover 组件的位置一致，不再赘述

API

Attributes

Props

属性值	说明	类型	默认值
position	对齐位置	PopconfirmPosition	bottom
offset	偏移距离(px)	number	6
duration	弹出过渡动画持续时间	number	250
btn-size	按钮大小	[xs,sm,md,lg,xl]	250
z-index	z-index值	number	0
close-on-click-outside	点击外部关闭弹出框	boolean	true
close-on-escape	esc关闭弹出框	boolean	true

Event

名称	说明	类型
confirm	确定操作回调	() => void
cancle	取消操作回调	() => void

Slots

名称	说明
trigger	触发器插槽
title	提示文本插槽
action	操作插槽