1.0.2 • Published 1 month ago
@tanzhenxing/zx-popconfirm v1.0.2
zx-popconfirm 气泡确认框组件
基于 uni-app 开发的气泡确认框组件，可在移动端和小程序中使用。
安装方式
npm install @tanzhenxing/zx-popconfirm引入组件
在 pages.json 中注册组件：
{
"easycom": {
"autoscan": true,
"custom": {
"^zx-popconfirm": "@tanzhenxing/zx-popconfirm/zx-popconfirm"
}
}
}基本使用
<template>
<zx-popconfirm title="确定要删除吗？">
<template #reference>
<button>删除</button>
</template>
</zx-popconfirm>
</template>API
Props 属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String | '' | 标题文本 |
| confirmButtonText | String | '确认' | 确认按钮文本 |
| cancelButtonText | String | '取消' | 取消按钮文本 |
| confirmButtonType | String | 'primary' | 确认按钮类型，可选值：'default', 'primary', 'success', 'warning', 'danger', 'info', 'text' |
| cancelButtonType | String | 'default' | 取消按钮类型，可选值：'default', 'primary', 'success', 'warning', 'danger', 'info', 'text' |
| icon | String | 'help-filled' | 图标类型，可选值：'help-filled', 'info-filled', 'warning-filled', 'error-filled' |
| iconColor | String | '#f90' | 图标颜色 |
| hideIcon | Boolean | false | 是否隐藏图标 |
| hideAfter | Number | 200 | 关闭延迟时间（毫秒） |
| width | String/Number | 150 | 气泡宽度 |
| placement | String | 'top' | 气泡展示位置，可选值：'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end' |
Events 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| confirm | 点击确认按钮时触发 | - |
| cancel | 点击取消按钮时触发 | - |
Slots 插槽
| 插槽名 | 说明 |
|---|---|
| reference | 触发气泡显示的元素 |
| actions | 自定义操作按钮，提供 confirm 和 cancel 函数 |
示例
基础用法
<zx-popconfirm title="确定要删除这条记录吗？">
<template #reference>
<button>删除</button>
</template>
</zx-popconfirm>自定义按钮文字
<zx-popconfirm
title="确定要执行此操作吗？"
confirm-button-text="是的"
cancel-button-text="取消操作"
@confirm="handleConfirm"
@cancel="handleCancel"
>
<template #reference>
<button>执行操作</button>
</template>
</zx-popconfirm>自定义图标和颜色
<zx-popconfirm
title="此操作不可逆，是否继续？"
icon="error-filled"
icon-color="#F56C6C"
>
<template #reference>
<button>危险操作</button>
</template>
</zx-popconfirm>自定义按钮类型
<zx-popconfirm
title="确认操作？"
confirm-button-type="success"
cancel-button-type="info"
>
<template #reference>
<button>自定义按钮类型</button>
</template>
</zx-popconfirm>自定义操作插槽
<zx-popconfirm title="确认删除所选项目？">
<template #reference>
<button>批量删除</button>
</template>
<template #actions="{ confirm, cancel }">
<button @click="cancel">我再想想</button>
<button @click="confirm">确定删除</button>
</template>
</zx-popconfirm>注意事项
- 组件需要 uni-app 环境，确保项目是基于 uni-app 框架开发的
- 组件使用了 Vue 3 的 Composition API (setup)，不支持 Vue 2
- 在某些小程序平台可能有兼容性问题，请根据实际情况调整样式