Tu View PlusPopconfirm 气泡确认框
点击元素，弹出气泡式的确认框。
基础用法
气泡确认框的基本用法。
<template>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城">
<tu-button>点击</tu-button>
</tu-popconfirm>
</template><template>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城">
<tu-button>点击</tu-button>
</tu-popconfirm>
</template>自定义按钮
自定义按钮的文字或图标。
<template>
<tu-popconfirm
content="谁家玉笛暗飞声，散入春风满洛城"
okText="知也"
cancelText="不知"
>
<tu-button>点击</tu-button>
</tu-popconfirm>
</template><template>
<tu-popconfirm
content="谁家玉笛暗飞声，散入春风满洛城"
okText="知也"
cancelText="不知"
>
<tu-button>点击</tu-button>
</tu-popconfirm>
</template>弹出位置
设置 tu-popconfirm 元素属性的 position 值为 tl、top、tr、bl、bottom、br、lt、left、lb、rt、right、rb来配置方位。
<template>
<div :style="{ position: 'relative', width: '440px', height: '280px' }">
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="tl">
<tu-button style="position: absolute; top: 0; left: 90px">
上左
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="top">
<tu-button style="position: absolute; top: 0; left: 180px">
上方
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="tr">
<tu-button style="position: absolute; top: 0; left: 280px">
上右
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="bl">
<tu-button style="position: absolute; top: 240px; left: 80px">
下左
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="bottom">
<tu-button style="position: absolute; top: 240px; left: 180px">
下方
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="br">
<tu-button style="position: absolute; top: 240px; left: 280px">
下右
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="lt">
<tu-button style="position: absolute; top: 60px; left: 10px">
左上
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="left">
<tu-button style="position: absolute; top: 120px; left: 10px">
左方
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="lb">
<tu-button style="position: absolute; top: 180px; left: 10px">
左下
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="rt">
<tu-button style="position: absolute; top: 60px; left: 350px">
右上
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="right">
<tu-button style="position: absolute; top: 120px; left: 350px">
右方
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="rb">
<tu-button style="position: absolute; top: 180px; left: 350px">
右下
</tu-button>
</tu-popconfirm>
</div>
</template><template>
<div :style="{ position: 'relative', width: '440px', height: '280px' }">
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="tl">
<tu-button style="position: absolute; top: 0; left: 90px">
上左
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="top">
<tu-button style="position: absolute; top: 0; left: 180px">
上方
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="tr">
<tu-button style="position: absolute; top: 0; left: 280px">
上右
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="bl">
<tu-button style="position: absolute; top: 240px; left: 80px">
下左
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="bottom">
<tu-button style="position: absolute; top: 240px; left: 180px">
下方
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="br">
<tu-button style="position: absolute; top: 240px; left: 280px">
下右
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="lt">
<tu-button style="position: absolute; top: 60px; left: 10px">
左上
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="left">
<tu-button style="position: absolute; top: 120px; left: 10px">
左方
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="lb">
<tu-button style="position: absolute; top: 180px; left: 10px">
左下
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="rt">
<tu-button style="position: absolute; top: 60px; left: 350px">
右上
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="right">
<tu-button style="position: absolute; top: 120px; left: 350px">
右方
</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" position="rb">
<tu-button style="position: absolute; top: 180px; left: 350px">
右下
</tu-button>
</tu-popconfirm>
</div>
</template>确认框类型
通过 type 属性可以设置确认框类型。
<template>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" type="success">
<tu-button type="success">成功确认</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" type="error">
<tu-button type="danger">错误确认</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" type="warning">
<tu-button type="warning">警告确认</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" type="info">
<tu-button type="info">信息确认</tu-button>
</tu-popconfirm>
</template><template>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" type="success">
<tu-button type="success">成功确认</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" type="error">
<tu-button type="danger">错误确认</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" type="warning">
<tu-button type="warning">警告确认</tu-button>
</tu-popconfirm>
<tu-popconfirm content="谁家玉笛暗飞声，散入春风满洛城" type="info">
<tu-button type="info">信息确认</tu-button>
</tu-popconfirm>
</template>Popconfirm API
Popconfirm Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| popup-visible / v-model | 文字气泡是否可见 | Boolean | - |
| default-popup-visible | 气泡确认框默认是否可见（非受控模式） | Boolean | false |
| content | 内容 | String | - |
| position | 弹出位置 | String | top |
| type | 气泡确认框的类型 | String | 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 null undefined | - |
| on-before-ok | 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。 | Function | - |
| on-before-cancel | 触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。 | Function | - |
Popconfirm Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| popup-visible-change | 文字气泡显示状态改变时触发 | Function |
| ok | 点击确认按钮时触发 | - |
| cancel | 点击取消按钮时触发 | - |
Popconfirm Slots
| 参数名 | 描述 |
|---|---|
| icon | 图标 |
| content | 内容 |