Popconfirm 气泡确认框

点击元素，弹出气泡式的确认框。

何时使用

目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。

示例

基本用法

<template>
  <f-popconfirm title="Are you sure delete this task?" @confirm="confirm" @cancel="cancel">
    <f-button>Delete</f-button>
  </f-popconfirm>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { message } from '@fs/smart-design'
export default defineComponent({
  setup() {
    const confirm = (e: MouseEvent) => {
      console.log(e)
      message.success('Click on Yes')
    }

    const cancel = (e: MouseEvent) => {
      console.log(e)
      message.error('Click on No')
    }
    return {
      confirm,
      cancel,
    }
  },
})
</script>

带描述用法(新增了content属性)

<template>
  <f-popconfirm
    title="确定将xxx菜单删除吗？"
    content="删除后不可恢复,请谨慎操作"
    ok-text="确定"
    cancel-text="取消"
    @confirm="confirm"
    @cancel="cancel"
  >
    <f-button>Delete</f-button>
  </f-popconfirm>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { message } from '@fs/smart-design'
export default defineComponent({
  setup() {
    const confirm = (e: MouseEvent) => {
      console.log(e)
      message.success('Click on Yes')
    }

    const cancel = (e: MouseEvent) => {
      console.log(e)
      message.error('Click on No')
    }
    return {
      confirm,
      cancel,
    }
  },
})
</script>

API

参数	说明	类型	默认值	版本
cancelButton	完全自定义取消按钮	slot	-	3.0
cancelButtonProps	cancel 按钮 props	ButtonProps	-
cancelText	取消按钮文字	string|slot	取消
disabled	点击 Popconfirm 子元素是否弹出气泡确认框	boolean	false
icon	自定义弹出气泡 Icon 图标	vNode	<Icon type="exclamation-circle" />
okButton	完全自定义确认按钮	slot	-	3.0
okButtonProps	ok 按钮 props	ButtonProps	-
okText	确认按钮文字	string|slot	确定
okType	确认按钮类型	string	primary
showCancel	是否显示取消按钮	boolean	true	3.0
title	确认框的标题	string|slot	无
content(新)	确认框的描述	string|slot	无
visible (v-model)	是否显示	boolean	-

注意：

• content属性为新增

事件

事件名称	说明	回调参数
cancel	点击取消的回调	function(e)
confirm	点击确认的回调	function(e)
visibleChange	显示隐藏的回调	function(visible)

更多属性请参考 Tooltip。

注意

请确保 Popconfirm 的子元素能接受 mouseenter、mouseleave、focus、click 事件。