Popconfirm 气泡确认框

气泡确认框组件，基于 Popover 的确认框组件，用于确认操作。

基础用法

<button id="demo-popconfirm">删除</button>

<script>
  const popconfirm = new SaPopconfirm('#demo-popconfirm', {
    title: '确定要删除吗？',
    onConfirm: () => {
      alert('已确认删除');
    },
    onCancel: () => {
      console.log('已取消');
    }
  });
</script>

加载 SanoUI 组件中...

不同位置

通过 placement 配置确认框显示位置。

<button id="demo-top">Top</button>
<button id="demo-bottom">Bottom</button>
<button id="demo-left">Left</button>
<button id="demo-right">Right</button>

<script>
  // Top 位置
  new SaPopconfirm('#demo-top', {
    title: 'Top 位置的确认框',
    placement: 'top',
    onConfirm: () => alert('确认')
  });
  
  // Bottom 位置
  new SaPopconfirm('#demo-bottom', {
    title: 'Bottom 位置的确认框',
    placement: 'bottom',
    onConfirm: () => alert('确认')
  });
  
  // Left 位置
  new SaPopconfirm('#demo-left', {
    title: 'Left 位置的确认框',
    placement: 'left',
    onConfirm: () => alert('确认')
  });
  
  // Right 位置
  new SaPopconfirm('#demo-right', {
    title: 'Right 位置的确认框',
    placement: 'right',
    onConfirm: () => alert('确认')
  });
</script>

加载 SanoUI 组件中...

自定义按钮文本

通过 confirmButtonText 和 cancelButtonText 自定义按钮文本。

<button id="demo-custom">自定义按钮</button>

<script>
  const popconfirm = new SaPopconfirm('#demo-custom', {
    title: '确定要执行此操作吗？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    onConfirm: () => {
      console.log('确认');
    },
    onCancel: () => {
      console.log('取消');
    }
  });
</script>

加载 SanoUI 组件中...

HTML 方式

通过 HTML 属性方式使用，更简洁。

<button data-popconfirm="确定要删除吗？">删除</button>
<button data-popconfirm="确定要提交吗？" data-popconfirm-placement="bottom">提交</button>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaPopconfirmOptions	{}

配置选项

参数	说明	类型	可选值	默认值
title	确认框标题	string	-	'确定要执行此操作吗？'
placement	显示位置	string	top / bottom / left / right	top
confirmButtonText	确认按钮文本	string	-	'确定'
cancelButtonText	取消按钮文本	string	-	'取消'
onConfirm	确认回调	function()	-	-
onCancel	取消回调	function()	-	-

方法

方法名	说明	参数	返回值
show	显示确认框	-	void
hide	隐藏确认框	-	void
destroy	销毁实例	-	void

自动初始化属性

属性	说明	类型	默认值
data-popconfirm	确认框标题（启用自动初始化）	string	-
data-popconfirm-placement	显示位置	string	top
data-popconfirm-confirm-text	确认按钮文本	string	'确定'
data-popconfirm-cancel-text	取消按钮文本	string	'取消'

示例代码

手动创建实例

const popconfirm = new SaPopconfirm('#delete-btn', {
  title: '确定要删除吗？',
  placement: 'top',
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  onConfirm: () => {
    // 执行删除操作
    deleteItem();
    SaTip.success('删除成功');
  },
  onCancel: () => {
    console.log('已取消删除');
  }
});

// 显示确认框
popconfirm.show();

// 隐藏确认框
popconfirm.hide();

自动初始化

<button class="sa-button sa-button--danger" 
        data-popconfirm="确定要删除吗？"
        data-popconfirm-placement="top">
  删除
</button>

<button class="sa-button sa-button--primary" 
        data-popconfirm="确定要提交吗？"
        data-popconfirm-placement="bottom">
  提交
</button>

<script>
  SA.init('body');
</script>

在表格操作中使用

// 删除按钮的确认框
function initDeleteButtons() {
  const deleteButtons = document.querySelectorAll('.delete-btn');
  deleteButtons.forEach(btn => {
    const itemId = btn.dataset.id;
    new SaPopconfirm(btn, {
      title: '确定要删除这条记录吗？',
      onConfirm: () => {
        deleteItem(itemId).then(() => {
          SaTip.success('删除成功');
          // 刷新表格
          refreshTable();
        });
      }
    });
  });
}

实际使用场景

场景 1：表格操作确认

在表格操作列中使用 Popconfirm 确认删除操作。

<div id="table-container" style="height: 200px;"></div>

<script>
  const table = new SaTable('#table-container', {
    columns: [
      { field: 'name', label: '姓名', width: 120 },
      { field: 'email', label: '邮箱', width: 200 },
      {
        field: 'action',
        label: '操作',
        width: 150,
        render: (value, row) => {
          return `
            <button class="sa-button sa-button--text sa-button--danger" 
                    id="delete-btn-${row.id}"
                    onclick="handleDelete(${row.id})">
              删除
            </button>
          `;
        }
      }
    ],
    data: [
      { id: 1, name: '张三', email: 'zhangsan@example.com' },
      { id: 2, name: '李四', email: 'lisi@example.com' }
    ]
  });
  
  function handleDelete(id) {
    const btn = document.getElementById(`delete-btn-${id}`);
    if (!btn._popconfirm) {
      btn._popconfirm = new SaPopconfirm(btn, {
        title: '确定要删除这条记录吗？',
        placement: 'top',
        onConfirm: () => {
          alert(`删除记录 ID: ${id}`);
          btn._popconfirm = null;
        }
      });
    }
  }
</script>

加载 SanoUI 组件中...