Popconfirm 气泡确认框

点击某个元素弹出一个简单的气泡确认框

展示位置

Popconfirm 提供了 9 种展示位置

使用 title 属性来设置点击参考元素时显示的信息, 由 placement 属性来决定展示的方向: [方向]-[对齐位置]; 四个方向: top, bottom, left, right; 三种对齐位置: start, end, null, 默认为 null。 如 placement="left-end", 则气泡确认框出现在目标元素左侧, 且气泡确认框的底部与目标元素底部对齐。

<template>
  <div class="popconfirm-base-box">
    <div class="row center">
      <px-popconfirm
        class="box-item"
        title="Top Left prompts info"
        placement="top-start"
      >
        <template #reference>
          <px-button>top-start</px-button>
        </template>
      </px-popconfirm>
      <px-popconfirm
        class="box-item"
        title="Top Center prompts info"
        placement="top"
      >
        <template #reference>
          <px-button>top</px-button>
        </template>
      </px-popconfirm>
      <px-popconfirm
        class="box-item"
        title="Top Right prompts info"
        placement="top-end"
      >
        <template #reference>
          <px-button>top-end</px-button>
        </template>
      </px-popconfirm>
    </div>
    <div class="row">
      <px-popconfirm
        class="box-item"
        title="Left Top prompts info"
        placement="left-start"
      >
        <template #reference>
          <px-button>left-start</px-button>
        </template>
      </px-popconfirm>
      <px-popconfirm
        class="box-item"
        title="Right Top prompts info"
        placement="right-start"
      >
        <template #reference>
          <px-button>right-start</px-button>
        </template>
      </px-popconfirm>
    </div>
    <div class="row">
      <px-popconfirm
        class="box-item"
        title="Left Center prompts info"
        placement="left"
      >
        <template #reference>
          <px-button class="mt-3 mb-3">left</px-button>
        </template>
      </px-popconfirm>
      <px-popconfirm
        class="box-item"
        title="Right Center prompts info"
        placement="right"
      >
        <template #reference>
          <px-button>right</px-button>
        </template>
      </px-popconfirm>
    </div>
    <div class="row">
      <px-popconfirm
        class="box-item"
        title="Left Bottom prompts info"
        placement="left-end"
      >
        <template #reference>
          <px-button>left-end</px-button>
        </template>
      </px-popconfirm>
      <px-popconfirm
        class="box-item"
        title="Right Bottom prompts info"
        placement="right-end"
      >
        <template #reference>
          <px-button>right-end</px-button>
        </template>
      </px-popconfirm>
    </div>
    <div class="row center">
      <px-popconfirm
        class="box-item"
        title="Bottom Left prompts info"
        placement="bottom-start"
      >
        <template #reference> <px-button>bottom-start</px-button></template>
      </px-popconfirm>
      <px-popconfirm
        class="box-item"
        title="Bottom Center prompts info"
        placement="bottom"
      >
        <template #reference> <px-button>bottom</px-button></template>
      </px-popconfirm>
      <px-popconfirm
        class="box-item"
        title="Bottom Right prompts info"
        placement="bottom-end"
      >
        <template #reference>
          <px-button>bottom-end</px-button>
        </template>
      </px-popconfirm>
    </div>
  </div>
</template>

<style>
.popconfirm-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popconfirm-base-box .center {
  justify-content: center;
}

.popconfirm-base-box .box-item {
  margin-top: 10px;
}
</style>

基础用法

Popconfirm 属性同 Tooltip 类似, 是基于 Tooltip 封装的拓展

在 Popconfirm 中, 只有 title 可用, content 属性无效。

<template>
  <px-popconfirm title="Are you sure to delete this?">
    <template #reference>
      <px-button>Delete</px-button>
    </template>
  </px-popconfirm>
</template>

自定义弹出框内容

可以在 Popconfirm 中自定义内容

<script setup lang="ts">
import { ref } from 'vue'

const clicked = ref(false)
const onCancel = () => {
  clicked.value = true
}
</script>

<template>
  <px-popconfirm
    width="220"
    icon="info-circle-solid"
    icon-color="#626AEF"
    title="Are you sure to delete this?"
    @cancel="onCancel"
  >
    <template #reference>
      <px-button>Delete</px-button>
    </template>
    <template #actions="{ confirm, cancel }">
      <px-button size="small" @click="cancel">No!</px-button>
      <px-button
        type="danger"
        size="small"
        :disabled="!clicked"
        @click="confirm"
      >
        Yes?
      </px-button>
    </template>
  </px-popconfirm>
</template>

多种让 Popconfirm 出现的方法

点击按钮触发事件

<script setup lang="ts">
const confirmEvent = () => {
  console.log('confirm!')
}
const cancelEvent = () => {
  console.log('cancel!')
}
</script>
<template>
  <px-popconfirm
    confirm-button-text="嘻嘻"
    cancel-button-text="No喵"
    confirm-button-type="sakura"
    cancel-button-type="warning"
    icon="info-circle-solid"
    icon-color="#626AEF"
    title="Are you sure to delete this?"
    @confirm="confirmEvent"
    @cancel="cancelEvent"
  >
    <template #reference>
      <px-button>Delete</px-button>
    </template>
  </px-popconfirm>
</template>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Popconfirm API

Props

Name	Description	Type	Default
title	确认框标题	string	-
confirmButtonText	确认按钮文字	string	Yes
cancelButtonText	取消按钮文字	string	No
confirmButtonType	确认按钮类型	enum	primary
cancelButtonType	取消按钮类型	enum	-
icon	自定义图标	string	question-solid
iconColor	图标颜色	string	#f90
hideIcon	是否隐藏图标	boolean	false
hideAfter	关闭延时	number	200
width	弹层宽度,最小宽度150px	number | string	200

Events

Name	Description	Type
confirm	点击确认按钮时触发	function
cancel	点击取消按钮时触发	function

Slots

Name	Description
default	默认插槽,触发Popconfirm显示的HTML元素
reference	同上, default插槽别名
actions	操作按钮插槽