Vue3弹出确认（Popconfirm）

置顶 已于 2025-03-17 16:29:39 修改
阅读量3.9k 收藏 3
点赞数 3
分类专栏： Less TypeScript Vue3 文章标签： vue3 typescript components 1024程序员节
于 2023-08-09 17:20:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Dandrose/article/details/132192523
版权

效果如下图：

在这里插入图片描述
在这里插入图片描述

在线预览

APIs

Popconfirm

参数说明类型默认值
title弹出确认框的标题string | slotundefined
titleStyle设置标题的样式CSSProperties{}
description弹出确认框的内容描述string | slotundefined
descriptionStyle设置内容描述的样式CSSProperties{}
keyboard是否支持按键操作 (enter 显示；esc 关闭)booleantrue
tooltipStyle设置弹出提示的样式CSSProperties{}
icon自定义弹出确认框 Icon 图标‘success’ | ‘info’ | ‘warning’ | ‘danger’ | VNode | Slot‘warning’
iconStyle设置 Icon 图标的样式，一般不需要设置，主要用于自定义 Icon 图标时CSSProperties{}
cancelText取消按钮文字string | slot‘取消’
cancelType取消按钮类型‘default’ | ‘reverse’ | ‘primary’ | ‘danger’ | ‘dashed’ | ‘text’ | ‘link’‘default’
cancelProps取消按钮 props，优先级高于 cancelType，参考 Button Propsobject{}
okText确认按钮文字string | slot‘确定’
okType确认按钮类型‘default’ | ‘reverse’ | ‘primary’ | ‘danger’ | ‘dashed’ | ‘text’ | ‘link’‘primary’
okProps确认按钮 props，优先级高于 okType，参考 Button Propsobject{}
showCancel是否显示取消按钮booleantrue

更多属性请参考 Tooltip

Slots

名称说明类型
title自定义弹出确认框的标题v-slot:title
description自定义弹出确认框的内容描述v-slot:description
icon自定义图标v-slot:icon
cancelText自定义取消按钮文字v-slot:cancelText
okText自定义确认按钮文字v-slot:okText
default自定义内容v-solt:default

Events

名称说明类型
cancel点击取消的回调(e: Event) => void
ok点击确认的回调(e: Event) => void
openChange显示隐藏的回调(open: boolean) => void

创建弹出确认组件Popconfirm.vue

其中引入使用了以下工具函数：

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { CSSProperties, VNode, Slot } from 'vue'
import Tooltip from 'components/tooltip'
import Button from 'components/button'
import { useSlotsExist, useInject } from 'components/utils'
export interface Props {
  title?: string // 弹出确认框的标题 string | slot
  titleStyle?: CSSProperties // 设置标题的样式
  description?: string // 弹出确认框的内容描述 string | slot
  descriptionStyle?: CSSProperties // 设置内容描述的样式
  keyboard?: boolean // 是否支持按键操作 (enter 显示；esc 关闭)
  tooltipStyle?: CSSProperties // 设置弹出提示的样式
  icon?: 'success' | 'info' | 'warning' | 'danger' | VNode | Slot // 自定义 Icon 图标，预置四种类型图标 string | VNode | slot
  iconStyle?: CSSProperties // 设置 Icon 图标的样式，一般不需要设置，主要用于自定义 Icon 图标时
  cancelText?: string // 取消按钮文字 string | slot
  cancelType?: 'default' | 'reverse' | 'primary' | 'danger' | 'dashed' | 'text' | 'link' // 取消按钮类型
  cancelProps?: object // 取消按钮 props，优先级高于 cancelType，参考 Button 组件 props
  okText?: string // 确认按钮文字 string | slot
  okType?: 'default' | 'reverse' | 'primary' | 'danger' | 'dashed' | 'text' | 'link' // 确认按钮类型
  okProps?: object // 确认按钮 props，优先级高于 okType，参考 Button 组件 props
  showCancel?: boolean // 是否显示取消按钮
}
const props = withDefaults(defineProps<Props>(), {
  title: undefined,
  titleStyle: () => ({}),
  description: undefined,
  descriptionStyle: () => ({}),
  keyboard: true,
  tooltipStyle: () => ({}),
  icon: 'warning',
  iconStyle: () => ({}),
  cancelText: '取消',
  cancelType: 'default',
  cancelProps: () => ({}),
  okText: '确定',
  okType: 'primary',
  okProps: () => ({}),
  showCancel: true
})
const tooltipRef = ref() // Tooltip 组件模板引用
const { colorPalettes } = useInject('Popconfirm') // 主题色注入
const emits = defineEmits(['cancel', 'ok'])
const slotsExist = useSlotsExist(['description'])
const showDesc = computed(() => {
  return slotsExist.description || props.description
})
function onCancel(e: Event): void {
  emits('cancel', e)
  tooltipRef.value.hide()
}
function onOk(e: Event): void {
  emits('ok', e)
  tooltipRef.value.hide()
}
</script>
<template>
  <Tooltip
    ref="tooltipRef"
    max-width="auto"
    bg-color="#fff"
    :tooltip-style="{
      padding: '12px',
      borderRadius: '8px',
      textAlign: 'start',
      ...tooltipStyle
    }"
    trigger="click"
    :keyboard="keyboard"
    :transition-duration="200"
    :style="`
      --popconfirm-primary-color: ${colorPalettes[5]};
      --popconfirm-success-color: #52c41a;
      --popconfirm-danger-color: #ff4d4f;
      --popconfirm-warning-color: #faad14;
    `"
    v-bind="$attrs"
  >
    <template #tooltip>
      <div class="popconfirm-wrap">
        <span class="popconfirm-icon" :style="iconStyle">
          <slot name="icon">
            <svg
              v-if="icon === 'info'"
              class="icon-info"
              focusable="false"
              width="1em"
              height="1em"
              fill="currentColor"
              viewBox="64 64 896 896"
              data-icon="info-circle"
              aria-hidden="true"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
              ></path>
            </svg>
            <svg
              v-else-if="icon === 'success'"
              class="icon-success"
              focusable="false"
              width="1em"
              height="1em"
              fill="currentColor"
              viewBox="64 64 896 896"
              data-icon="check-circle"
              aria-hidden="true"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
              ></path>
            </svg>
            <svg
              v-else-if="icon === 'danger'"
              class="icon-danger"
              focusable="false"
              width="1em"
              height="1em"
              fill="currentColor"
              viewBox="64 64 896 896"
              data-icon="close-circle"
              aria-hidden="true"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
              ></path>
            </svg>
            <svg
              v-else-if="icon === 'warning'"
              class="icon-warning"
              focusable="false"
              width="1em"
              height="1em"
              fill="currentColor"
              viewBox="64 64 896 896"
              data-icon="exclamation-circle"
              aria-hidden="true"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
              ></path>
            </svg>
            <component v-else-if="icon" :is="icon" />
          </slot>
        </span>
        <div class="popconfirm-title" :class="{ 'title-font-weight': showDesc }" :style="titleStyle">
          <slot name="title">{{ title }}</slot>
        </div>
      </div>
      <div v-if="showDesc" class="popconfirm-description" :style="descriptionStyle">
        <slot name="description">{{ description }}</slot>
      </div>
      <div class="popconfirm-btns">
        <Button v-if="showCancel" size="small" :type="cancelType" @click="onCancel" v-bind="cancelProps">
          <slot name="cancelText">{{ cancelText }}</slot>
        </Button>
        <Button size="small" :type="okType" @click="onOk" v-bind="okProps">
          <slot name="okText">{{ okText }}</slot>
        </Button>
      </div>
    </template>
    <slot></slot>
  </Tooltip>
</template>
<style lang="less" scoped>
.popconfirm-wrap {
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  display: flex;
  flex-wrap: nowrap;
  align-items: start;
  .popconfirm-icon {
    flex: none;
    font-size: 14px;
    line-height: 1;
    padding-top: 4px;
    display: inline-block;
    text-align: center;
    .icon-svg {
      display: inline-block;
      fill: currentColor;
    }
    :deep(svg) {
      fill: currentColor;
    }
  }
  .icon-info {
    color: var(--popconfirm-primary-color);
  }
  .icon-success {
    color: var(--popconfirm-success-color);
  }
  .icon-danger {
    color: var(--popconfirm-danger-color);
  }
  .icon-warning {
    color: var(--popconfirm-warning-color);
  }
  .popconfirm-title {
    flex: auto;
    margin-left: 8px;
  }
  .title-font-weight {
    font-weight: 600;
  }
}
.popconfirm-description {
  position: relative;
  margin-left: 22px;
  margin-bottom: 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
}
.popconfirm-btns {
  text-align: end;
  .m-btn {
    margin-left: 8px;
  }
}
</style>

在要使用的页面引入

其中引入使用了以下组件：

<script setup lang="ts">
import Popconfirm from './Popconfirm.vue'
import { ref, h } from 'vue'
import { FireFilled, QuestionCircleFilled, SoundFilled } from '@ant-design/icons-vue'
const message = ref()
const confirm = (e: MouseEvent) => {
  console.log('confirm', e)
  message.value.success('Click on Yes')
}
const cancel = (e: MouseEvent) => {
  console.log('cancel', e)
  message.value.error('Click on No')
}
const openChange = (open: boolean) => {
  console.log('open', open)
}
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Popconfirm
      title="Are you sure delete this task ?"
      description="This will have other effects..."
      @ok="confirm"
      @cancel="cancel"
      @openChange="openChange"
    >
      <Button type="danger">Delete Confirm</Button>
    </Popconfirm>
    <h2 class="mt30 mb10">隐藏取消按钮</h2>
    <Popconfirm title="It's friendly reminder ..." :show-cancel="false" icon="info" @ok="confirm">
      <Button type="primary">Hidden Cancel Btn</Button>
    </Popconfirm>
    <h2 class="mt30 mb10">自定义样式</h2>
    <Popconfirm
      :max-width="280"
      :show-cancel="false"
      :title-style="{ fontSize: '16px', fontWeight: 'bold', color: '#1677ff' }"
      :description-style="{ color: '#fff' }"
      bg-color="#000"
      :tooltip-style="{ padding: '16px 18px', borderRadius: '12px' }"
      :icon-style="{ fontSize: '16px', paddingTop: '5px' }"
      ok-text="Awesome"
      :ok-props="{ shape: 'round' }"
      @ok="confirm"
      @cancel="cancel"
    >
      <template #title>
        <a href="https://themusecatcher.github.io/vue-amazing-ui/" target="_blank">Vue Amazing UI</a>
      </template>
      <template #description> An Amazing Vue3 UI Components Library </template>
      <template #icon>
        <FireFilled style="color: #d4380d" />
      </template>
      <Button type="primary">Vue Amazing UI</Button>
    </Popconfirm>
    <h2 class="mt30 mb10">自定义按钮</h2>
    <Space>
      <Popconfirm title="Are you sure ?" ok-text="Yes" cancel-text="No" @ok="confirm" @cancel="cancel">
        <Button type="danger">Delete Confirm</Button>
      </Popconfirm>
      <Popconfirm
        title="Are you sure ?"
        ok-text="Yes"
        :ok-props="{ ghost: true }"
        cancel-text="No"
        :cancel-props="{ type: 'danger', ghost: true }"
        @ok="confirm"
        @cancel="cancel"
      >
        <Button type="danger">Delete Confirm</Button>
      </Popconfirm>
    </Space>
    <h2 class="mt30 mb10">预置四种图标</h2>
    <Space>
      <Popconfirm title="Are you sure delete this task ?" @ok="confirm" @cancel="cancel">
        <Button type="primary">Warning Confirm</Button>
      </Popconfirm>
      <Popconfirm title="Are you sure delete this task ?" icon="info" @ok="confirm" @cancel="cancel">
        <Button type="primary">Info Confirm</Button>
      </Popconfirm>
      <Popconfirm title="Are you sure delete this task ?" icon="success" @ok="confirm" @cancel="cancel">
        <Button type="primary">Success Confirm</Button>
      </Popconfirm>
      <Popconfirm title="Are you sure delete this task ?" icon="danger" @ok="confirm" @cancel="cancel">
        <Button type="primary">Danger Confirm</Button>
      </Popconfirm>
    </Space>
    <h2 class="mt30 mb10">自定义图标</h2>
    <Space>
      <Popconfirm
        title="Are you sure ?"
        :icon="() => h(QuestionCircleFilled, { style: 'color: #ff4d4f' })"
        @ok="confirm"
        @cancel="cancel"
      >
        <Button type="danger">Delete Confirm</Button>
      </Popconfirm>
      <Popconfirm title="Are you sure ?" @ok="confirm" @cancel="cancel">
        <template #icon>
          <SoundFilled style="color: #faad14" />
        </template>
        <Button type="primary">Notification Confirm</Button>
      </Popconfirm>
    </Space>
    <h2 class="mt30 mb10">不同的触发方式</h2>
    <Space>
      <Popconfirm title="It's friendly reminder ..." @ok="confirm" @cancel="cancel">
        <Button type="primary">Click Me Confirm</Button>
      </Popconfirm>
      <Popconfirm title="It's friendly reminder ..." trigger="hover" @ok="confirm" @cancel="cancel">
        <Button type="primary">Hover Me Confirm</Button>
      </Popconfirm>
    </Space>
    <h2 class="mt30 mb10">自定义过渡动画时间</h2>
    <Popconfirm title="Transition Duration 300ms" :transition-duration="300" @ok="confirm" @cancel="cancel">
      <Button type="primary">Transition Duration 300ms</Button>
    </Popconfirm>
    <h2 class="mt30 mb10">延迟显示隐藏</h2>
    <Space>
      <Popconfirm
        :show-delay="300"
        :hide-delay="300"
        title="Are you confirm ?"
        description="delay 300ms"
        @ok="confirm"
        @cancel="cancel"
      >
        <Button type="primary">Delay 300ms Confirm</Button>
      </Popconfirm>
      <Popconfirm
        :show-delay="500"
        :hide-delay="500"
        title="Are you confirm ?"
        description="delay 500ms"
        @ok="confirm"
        @cancel="cancel"
      >
        <Button type="primary">Delay 500ms Confirm</Button>
      </Popconfirm>
    </Space>
    <h2 class="mt30 mb10">隐藏箭头</h2>
    <Popconfirm :arrow="false" title="My arrow is hidden" @ok="confirm" @cancel="cancel">
      <Button type="primary">Hide Arrow Confirm</Button>
    </Popconfirm>
    <Message ref="message" />
  </div>
</template>
【VUE】el-popconfirm失效，点击没有任何反应，刷新页面才能点击
weixin_41498246的博客
07-20 1329
el-popconfirm刷新才能点击问题临时解决办法
Vue3（4）: 用户管理+角色管理+菜单管理+首页+暗黑模式/主题切换
m0_73560798的博客
05-02 1544
（2）给抽屉的身体部分添加校验规则:rules="rules"（告诉表单数据数据收集:model="userParams"并给表单项添加prop）收集到新增的职位数据》表单校验》判断》再次获取全部已有数据》清空数据》清空错误提示》将对话框隐藏（记得更新返回的是当前页还是添加上一页）需要收集参数（当前用户id,收集到的职位id）》分配用户职位（判断，提示信息，获取更新完毕用户的信息，更新后留在当前页）携带职位的id，选中节点的id，半选的id》下发权限》判断》页面刷新window。
自定义提示确认弹窗-vue
qq_53024519的博客
01-17 825
效果：更适用于移动端。
Flutter Dialog模态框使用及自定义Dialog
isusjjyy的专栏
10-29 2585
自定义dialog插件 用来弹出确认取消提示框，或者自定义模态框 自定义类： import 'package:flutter/material.dart'; class dialogUtil { /** * 通用显示确定按钮框 */ static showConfirmDialog(context, options) { showDialog( ...
ElMessageBox消息弹框(vue3总结)
最新发布
qq_38210427的博客
04-22 246
【代码】ElMessageBox消息弹框(vue3总结)
Vue3封装确认弹框，提示弹框组件
永远别小看程序员。即使是青铜，说不定背后有个王者在帮他
04-25 2011
今天给大家分享一个vue3+typescript封装的确认弹框和提示弹框组件，有喜欢的小伙伴直接复制相应的代码拿到项目中使用。
Vue3封装可复用组件-Confirm
m0_46444000的博客
04-02 4026
一看就懂, 直接上手
Ant Design Vue Popconfirm 实现回车确认（Enter 确认）
然后他就拿棍子来打我
04-25 1039
操作的简单而紧凑的确认对话框。 现实 Enter 触发确认事件, events API 无法满足.
vue3路由跳转离开前弹窗确认
m0_56683897的博客
06-06 771
如题，这种时候监听路由会十分不便，并且还要做到拦截，使用onBeforeRouteLeave即可。
vue3项目中使用ant design vue气泡确认框展示信息供查看
qq_53821346的博客
04-24 2519
不过使用这样子的要注意一点：在这边显示的动态值要在这个位置写{{record.company.companyName}}--->(这个是需要显示的动态公司名称)，而不能在data.ts文件中的customRender：重新显示数据写法，会被覆盖！在实现公司项目的时候，看到了同事使用ant design vue的气泡确认框（popconfirm）这一插件来展示相关信息供直接点击可查看，减少弹窗出现，觉得是一种很不错的写法，先将其记录在这边，方便以后需要的时候可以在这边借鉴。这样子的写法则是通过。
vue3 气泡弹出框
02-02
在Vue3项目中使用Ant Design Vue的气泡确认框（Popconfirm）可以通过以下步骤实现： 1. 首先，确保你已经安装了Ant Design Vue插件。你可以通过以下命令来安装： ```shell npm install ant-design-vue@next --save ...
vue3后台项目中arco design vue气泡框Popconfirm有哪几种使用方式
05-25
3. 控制弹出框的显示和隐藏： ```vue <a-button @click="visible = true">Open <a-popconfirm title="确定要删除吗？" v-model:visible="visible"> 确定要删除吗？ 确定 取消 </a-popconfirm> ...
vue3 离开页面弹窗确认
柒个橙子的博客
05-09 982
在订单支付页面倒计时没结束就离开当前页时期望弹窗提示是否确认离开。
Vue3警告提示（Alert）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
07-18 5416
警告提示，展现需要关注的信息，支持：五种类型；无边框；可关闭；辅助性文字介绍；辅助图标；自定义图标；自定义关闭文字；自定义操作项；自定义主题色等；总之，功能丰富，简单易用，总能满足你的想象😁😁
封装confirm（Vue3+Ts）
HBR666_的博客
12-15 1133
通过showConfirm函数 传递过来参数，在调用时通过createApp挂载组件，并传递过去参数，组件进行接收和渲染，当点击确定和取消时卸载该组件，.then 和.catch执行相关确定取消的逻辑。该期末考试了，也该复习复习知识点了不然包挂科的，然后下周还有一次面试，Vue也该复习复习了，虽然写过一个项目了，但是感觉对Vue的一些用法还是不太熟悉。首先要进行调用函数进行传参的操作，而且组件还要接收，那怎么才能只在调用函数的情况，没有父组件子组件这种关系进行支撑的情况下对一个组件进行传参？
vue3封装ElMessageBox.confirm（确认框），避免提示信息重复写代码。
choorn的博客
05-06 9226
Promise对象可以在成功或失败时分别执行两个回调函数，我们写好这两个函数传递给封装的代码，在相应位置调用这两个函数即可。确认框是一个Promise对象，与axios属于同种，我觉得所有Promise类的对象封装都可以参考此方法（有待验证）。
vue3实现表格的分页以及确认消息弹窗
qq_61549190的博客
06-16 1887
动态获取 当前页面和页码尺寸// 切换每页行数时，返回第一页动态获取响应式数据 利用数组的slice方法 根据索引的开头和结尾截取数组元素// 获取当前页应显示的数据});
vue3使用createVNode + render基于el-dialog封装二次确认弹框组件
lzy970703的博客
08-09 656
【代码】vue3使用createVNode + render基于el-dialog封装二次确认弹框组件。
[已解决] vue element-ui表格中使用Popconfirm或者Popover弹窗，删除按钮不显示问题
热门推荐
程序员青戈
08-01 1万+
解决ElementUI表格中Poppover不显示问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

theMuseCatcher

您的支持是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值