气泡确认框 Popconfirm

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

基本用法

气泡确认框的基本用法。

---

代码事例

<template>
  <fk-popconfirm title="Are you sure you want to delete?">
    <fk-button>Click To Delete</fk-button>
  </fk-popconfirm>
</template>

底部带边框 Border

气泡确认框的带边框。

---

代码事例

<template>
  <fk-popconfirm title="Are you sure you want to delete?" :border="true" content="内容内容内容内容内容内容内容内容内容">
    <fk-button>Click To Delete</fk-button>
  </fk-popconfirm>
</template>

Footer 样式自定义

气泡确认框的footer自定义。

---

代码事例

<template>
  <fk-space>
    <fk-popconfirm :border="true" size="small" title="Are you sure you want to delete?" footer-align="left" content="内容内容内容内容内容内容内容内容内容">
        <fk-button>Footer Left</fk-button>
    </fk-popconfirm>
    <fk-popconfirm :border="true" size="small" footer-align="center" content="内容内容内容内容内容内容内容内容内容">
        <fk-button>Footer Center</fk-button>
    </fk-popconfirm>
    <fk-popconfirm :border="true" size="small" footer-align="right" content="内容内容内容内容内容内容内容内容内容">
        <fk-button>Footer Right</fk-button>
    </fk-popconfirm>
  </fk-space>
</template>

自定义按钮

自定义按钮的文字或图标。

---

代码事例

<template>
  <fk-popconfirm title="Do you want to discard the draft?" ok-text="Discard" cancel-text="No">
    <fk-button>Discard</fk-button>
  </fk-popconfirm>
</template>

弹出位置

popconfirm 支持 12 个不同的方位。分别为：上左 上 上右 下左 下 下右 左上 左 左下 右上 右 右下。

---

代码事例

<template>
  <div :style="{position: 'relative', width: '440px', height: '280px'}">
    <fk-popconfirm title="This is a Popconfirm" position="tl">
      <fk-button class="button" :style="{position: 'absolute',top:'0',left:'70px'}">TL</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="top">
      <fk-button class="button" :style="{position: 'absolute',top:'0',left:'180px'}">TOP</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="tr">
      <fk-button class="button" :style="{position: 'absolute',top:'0',left:'290px'}">TR</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="bl">
      <fk-button class="button" :style="{position: 'absolute',top:'240px',left:'70px'}">BL</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="bottom">
      <fk-button class="button" :style="{position: 'absolute',top:'240px',left:'180px'}">BOTTOM</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="br">
      <fk-button class="button" :style="{position: 'absolute',top:'240px',left:'290px'}">BR</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="lt">
      <fk-button class="button" :style="{position: 'absolute',top:'60px',left:'10px'}">LT</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="left">
      <fk-button class="button" :style="{position: 'absolute',top:'120px',left:'10px'}">LEFT</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="lb">
      <fk-button class="button" :style="{position: 'absolute',top:'180px',left:'10px'}">LB</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="rt">
      <fk-button class="button" :style="{position: 'absolute',top:'60px',left:'350px'}">RT</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="right">
      <fk-button class="button" :style="{position: 'absolute',top:'120px',left:'350px'}">RIGHT</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="This is a Popconfirm" position="rb">
      <fk-button class="button" :style="{position: 'absolute',top:'180px',left:'350px'}">RB</fk-button>
    </fk-popconfirm>
  </div>
</template>

<style scoped lang="less">
.button{
  width: 100px;
}
</style>

确认框类型

通过 type 属性可以设置确认框类型。

---

代码事例

<template>
  <fk-space>
    <fk-popconfirm title="Are you sure you want to delete?" type="info">
      <fk-button>Click To Delete</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="Are you sure you want to delete?" type="success">
      <fk-button>Click To Delete</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="Are you sure you want to delete?" type="warning">
      <fk-button>Click To Delete</fk-button>
    </fk-popconfirm>
    <fk-popconfirm title="Are you sure you want to delete?" type="error">
      <fk-button>Click To Delete</fk-button>
    </fk-popconfirm>
  </fk-space>
</template>

<popconfirm> 组件继承 <trigger> 组件的全部属性

API

<popconfirm> Props

参数名	描述	类型	默认值
title	标题	string	-
content	内容	string	-
position	弹出位置	'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb'	'top'
popup-visible (v-model)	气泡确认框是否可见	boolean	-
default-popup-visible	气泡确认框默认是否可见（非受控模式）	boolean	false
type	气泡确认框的类型	'info' | 'success' | 'warning' | 'error'	'info'
ok-text	确认按钮的内容	string	-
cancel-text	取消按钮的内容	string	-
ok-loading	确认按钮是否为加载中状态	boolean	false
ok-button-props	确认按钮的Props	ButtonProps	-
cancel-button-props	取消按钮的Props	ButtonProps	-
content-class	弹出框内容的类名	ClassName	-
content-style	弹出框内容的样式	CSSProperties	-
arrow-class	弹出框箭头的类名	ClassName	-
arrow-style	弹出框箭头的样式	CSSProperties	-
popup-container	弹出框的挂载点	string | HTMLElement	-
on-before-ok	触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。	(done: (closed: boolean) => void) => void | boolean | Promise<void | boolean>	-
on-before-cancel	触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。	() => boolean	-

<popconfirm> Events

事件名	描述	参数
popup-visible-change	气泡确认框的显隐状态改变时触发	visible: boolean
ok	点击确认按钮时触发	-
cancel	点击取消按钮时触发	-

<popconfirm> Slots

插槽名	描述	参数
icon	图标	-
title	标题	-
content	内容	-