Vue3弹出确认（Popconfirm）

置顶 已于 2024-09-03 15:43:55 修改
阅读量2.6k 收藏 1
点赞数 3
分类专栏： less ts Vue3 文章标签： vue3 typescript components
于 2023-08-09 17:20:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dandrose/article/details/132192523
版权
Vue3 同时被 3 个专栏收录
78 篇文章 10 订阅
订阅专栏
ts
75 篇文章 4 订阅
订阅专栏
less
72 篇文章 3 订阅
订阅专栏

效果如下图：在线预览

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

APIs

Popconfirm

参数说明类型默认值
maxWidth弹出确认框最大宽度，单位 pxstring | number‘auto’
title弹出确认框的标题string | slotundefined
titleStyle设置标题的样式CSSProperties{}
description弹出确认框的内容描述string | slotundefined
descriptionStyle设置内容描述的样式CSSProperties{}
bgColor弹出确认框背景颜色string‘#fff’
popconfirmStyle弹出确认框容器样式CSSProperties{}
content展示的文本string | slotundefined
icon自定义弹出确认框 Icon 图标string | slotundefined
iconType弹出确认框 Icon 图标类型‘success’ | ‘info’ | ‘warning’ | ‘error’‘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
arrow是否显示箭头booleantrue
trigger弹出确认触发方式‘hover’ | ‘click’‘click’
showDelay弹出确认显示的延迟时间，单位 msnumber100
hideDelay弹出确认隐藏的延迟时间，单位 msnumber100
show v-model弹出确认是否显示booleanfalse

Events

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

创建弹出确认组件Popconfirm.vue

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

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import Button from '../button'
import type { CSSProperties } from 'vue'
import { useSlotsExist, rafTimeout, cancelRaf } from '../utils'
interface Props {
  maxWidth?: string | number // 弹出确认框最大宽度，单位 px
  title?: string // 弹出确认框的标题 string | slot
  titleStyle?: CSSProperties // 设置标题的样式
  description?: string // 弹出确认框的内容描述 string | slot
  descriptionStyle?: CSSProperties // 设置内容描述的样式
  bgColor?: string // 弹出确认框背景颜色
  popconfirmStyle?: CSSProperties // 弹出确认框容器样式
  content?: string // 展示的文本 string | slot
  icon?: string // 自定义弹出确认框 Icon 图标 string | slot
  iconType?: 'success' | 'info' | 'warning' | 'danger' // 弹出确认框 Icon 图标类型
  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 // 是否显示取消按钮
  arrow?: boolean // 是否显示箭头
  trigger?: 'hover' | 'click' // 弹出确认触发方式
  showDelay?: number // 弹出确认显示的延迟时间，单位 ms
  hideDelay?: number // 弹出确认隐藏的延迟时间，单位 ms
  show?: boolean // (v-model) 弹出确认是否显示
}
const props = withDefaults(defineProps<Props>(), {
  maxWidth: 'auto',
  title: undefined,
  titleStyle: () => ({}),
  description: undefined,
  descriptionStyle: () => ({}),
  bgColor: '#fff',
  popconfirmStyle: () => ({}),
  content: undefined,
  icon: undefined,
  iconType: 'warning',
  cancelText: '取消',
  cancelType: 'default',
  cancelProps: () => ({}),
  okText: '确定',
  okType: 'primary',
  okProps: () => ({}),
  showCancel: true,
  arrow: true,
  trigger: 'click',
  showDelay: 100,
  hideDelay: 100,
  show: false
})
const visible = ref(false)
const top = ref(0) // 提示框top定位
const left = ref(0) // 提示框left定位
const contentRef = ref() // 声明一个同名的模板引用
const popconfirmRef = ref() // 声明一个同名的模板引用
const hideTimer = ref() // 延迟调用 ID
const activeBlur = ref(true) // 是否激活 blur 事件
const emits = defineEmits(['update:show', 'cancel', 'ok', 'openChange'])
const slotsExist = useSlotsExist(['description'])
const popconfirmMaxWidth = computed(() => {
  if (typeof props.maxWidth === 'number') {
    return props.maxWidth + 'px'
  }
  return props.maxWidth
})
watch(
  popconfirmMaxWidth,
  () => {
    getPosition()
  },
  {
    flush: 'post'
  }
)
const showDesc = computed(() => {
  return slotsExist.description || props.description
})
function getPosition() {
  const contentWidth = contentRef.value.offsetWidth // 展示文本宽度
  const popWidth = popconfirmRef.value.offsetWidth // 提示文本宽度
  const popHeight = popconfirmRef.value.offsetHeight // 提示文本高度
  top.value = popHeight + (props.arrow ? 4 : 6)
  left.value = (popWidth - contentWidth) / 2
}
function onShow() {
  hideTimer.value && cancelRaf(hideTimer.value)
  if (!visible.value) {
    getPosition()
    rafTimeout(() => {
      visible.value = true
      emits('update:show', true)
      emits('openChange', true)
    }, props.showDelay)
  }
}
function onHide(): void {
  hideTimer.value = rafTimeout(() => {
    visible.value = false
    emits('update:show', false)
    emits('openChange', false)
  }, props.hideDelay)
}
function toggleVisible() {
  if (!visible.value) {
    onShow()
  } else {
    onHide()
  }
}
function onEnter() {
  activeBlur.value = false
}
function onLeave() {
  activeBlur.value = true
  popconfirmRef.value.focus()
}
function onCancel(e: Event) {
  emits('cancel', e)
  onHide()
}
function onOk(e: Event) {
  emits('ok', e)
  onHide()
}
</script>
<template>
  <div
    class="m-popconfirm-wrap"
    @mouseenter="trigger === 'hover' ? onShow() : onEnter()"
    @mouseleave="trigger === 'hover' ? onHide() : onLeave()"
  >
    <div
      ref="popconfirmRef"
      tabindex="1"
      class="m-popconfirm-content"
      :class="{ 'popconfirm-padding': arrow, 'popconfirm-visible': visible }"
      :style="`max-width: ${popconfirmMaxWidth}; --popover-background-color: ${bgColor}; transform-origin: 50% ${top}px; top: ${-top}px; left: ${-left}px;`"
      @blur="trigger === 'click' && activeBlur ? onHide() : () => false"
      @mouseenter="trigger === 'hover' ? onShow() : () => false"
      @mouseleave="trigger === 'hover' ? onHide() : () => false"
      @keydown.esc="onCancel"
    >
      <div class="m-popconfirm" :style="popconfirmStyle">
        <div class="m-popconfirm-message">
          <span class="m-popconfirm-icon" :class="`icon-${iconType}`" :style="iconStyle">
            <slot name="icon">
              <svg
                v-if="iconType === 'info'"
                class="icon-svg"
                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-if="iconType === 'success'"
                class="icon-svg"
                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-if="iconType === 'danger'"
                class="icon-svg"
                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-if="iconType === 'warning'"
                class="icon-svg"
                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>
            </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-buttons">
          <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>
      </div>
      <div v-if="arrow" class="popconfirm-arrow"></div>
    </div>
    <div
      ref="contentRef"
      @click="trigger === 'click' ? toggleVisible() : () => false"
      @mouseenter="trigger === 'click' && visible ? onEnter() : () => false"
      @mouseleave="trigger === 'click' && visible ? onLeave() : () => false"
    >
      <slot>{{ content }}</slot>
    </div>
  </div>
</template>
<style lang="less" scoped>
.m-popconfirm-wrap {
  position: relative;
  display: inline-block;
  .m-popconfirm-content {
    position: absolute;
    z-index: 999;
    width: max-content;
    pointer-events: none;
    transform: scale(0.8);
    opacity: 0;
    transition:
      transform 0.15s cubic-bezier(0.78, 0.14, 0.15, 0.86),
      opacity 0.15s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    outline: none;
    .m-popconfirm {
      min-width: 32px;
      min-height: 32px;
      padding: 12px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.88);
      line-height: 1.5714285714285714;
      text-align: start;
      text-decoration: none;
      word-break: break-all;
      cursor: auto;
      user-select: text;
      background-color: var(--popover-background-color);
      border-radius: 8px;
      box-shadow:
        0 6px 16px 0 rgba(0, 0, 0, 0.08),
        0 3px 6px -4px rgba(0, 0, 0, 0.12),
        0 9px 28px 8px rgba(0, 0, 0, 0.05);
      .m-popconfirm-message {
        position: relative;
        margin-bottom: 8px;
        font-size: 14px;
        display: flex;
        flex-wrap: nowrap;
        align-items: start;
        .m-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-warning :deep(svg) {
          color: #faad14;
        }
        .icon-info :deep(svg) {
          color: @themeColor;
        }
        .icon-success :deep(svg) {
          color: #52c41a;
        }
        .icon-danger :deep(svg) {
          color: #ff4d4f;
        }
        .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;
      }
      .popconfirm-buttons {
        text-align: end;
        .m-btn {
          margin-left: 8px;
        }
      }
    }
    .popconfirm-arrow {
      position: absolute;
      z-index: 9;
      left: 50%;
      bottom: 12px;
      transform: translateX(-50%) translateY(100%) rotate(180deg);
      display: block;
      pointer-events: none;
      width: 16px;
      height: 16px;
      overflow: hidden;
      &::before {
        position: absolute;
        bottom: 0;
        inset-inline-start: 0;
        width: 16px;
        height: 8px;
        background-color: var(--popover-background-color);
        clip-path: path(
          'M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z'
        );
        content: '';
      }
      &::after {
        position: absolute;
        width: 8.970562748477143px;
        height: 8.970562748477143px;
        bottom: 0;
        inset-inline: 0;
        margin: auto;
        border-radius: 0 0 2px 0;
        transform: translateY(50%) rotate(-135deg);
        box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.1);
        z-index: 0;
        background: transparent;
        content: '';
      }
    }
  }
  .popconfirm-padding {
    padding-bottom: 12px;
  }
  .popconfirm-visible {
    pointer-events: auto;
    transform: scale(1);
    opacity: 1;
  }
}
</style>

在要使用的页面引入

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

<script setup lang="ts">
import Popconfirm from './Popconfirm.vue'
import { ref } from 'vue'
import { FireFilled, QuestionCircleFilled, SoundFilled } from '@ant-design/icons-vue'
const message = ref()
const openChange = (visible: boolean) => {
  console.log('visible', visible)
}
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')
}
</script>
<template>
  <div class="ml60">
    <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-type="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="rgba(0, 0, 0.8)"
      :popconfirm-style="{ padding: '12px 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 />
      </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">预置四种 Icon 图标</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-type="info" @ok="confirm" @cancel="cancel">
        <Button type="primary">Info Confirm</Button>
      </Popconfirm>
      <Popconfirm title="Are you sure delete this task ?" icon-type="success" @ok="confirm" @cancel="cancel">
        <Button type="primary">Success Confirm</Button>
      </Popconfirm>
      <Popconfirm title="Are you sure delete this task ?" icon-type="danger" @ok="confirm" @cancel="cancel">
        <Button type="primary">Danger Confirm</Button>
      </Popconfirm>
    </Space>
    <h2 class="mt30 mb10">自定义 Icon 图标</h2>
    <Space>
      <Popconfirm title="Are you sure ?" icon-type="danger" @ok="confirm" @cancel="cancel">
        <template #icon>
          <QuestionCircleFilled />
        </template>
        <Button type="danger">Delete Confirm</Button>
      </Popconfirm>
      <Popconfirm title="Are you sure ?" @ok="confirm" @cancel="cancel">
        <template #icon>
          <SoundFilled />
        </template>
        <Button type="danger">Delete 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>
    <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>
theMuseCatcher
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于Vue弹框组件this.$confirm
泪耳的博客
06-08 7319
在写学生选课报名的时候用到了弹框组件，于是引用了this.$confirm,此方法同vue-element中的方法基本一致,
vue+elementUI弹出确认框和气泡确认框
YECHANG1450的博客
10-24 7586
官网确认框地址 https://element.eleme.cn/#/zh-CN/component/popconfirm
vue3+antd 实现点击按钮弹出对话框
最新发布
Python私教
07-07 1187
【代码】vue3+antd 实现点击按钮弹出对话框。
Vue弹窗 Confirm 组件
热门推荐
Abner 的博客 (:
09-15 12万+
Vue的弹窗组价 描述：有时候自己开发项目，需要使用到一些弹窗，提示框之类的东西。一般会有我们自己使用一些UI组件库，或者自己手写一个。 哈哈，用别人的东西有时候挺好的，但是有时候又不好，因为业务的需求和UI的设计总是变化的很快，别人的东西难免改起来很多时候感觉还不如自己写（反正很多时候我都是这样的感觉，特别是踩到坑时，往往觉得莫名其妙，不知如何是好，但是自己写的东西不一样，可以调试）。所以这...
Flutter Dialog模态框使用及自定义Dialog
isusjjyy的专栏
10-29 2470
自定义dialog插件 用来弹出确认取消提示框，或者自定义模态框 自定义类： import 'package:flutter/material.dart'; class dialogUtil { /** * 通用显示确定按钮框 */ static showConfirmDialog(context, options) { showDialog( ...
Vue3封装确认弹框，提示弹框组件
永远别小看程序员。即使是青铜，说不定背后有个王者在帮他
04-25 1789
今天给大家分享一个vue3+typescript封装的确认弹框和提示弹框组件，有喜欢的小伙伴直接复制相应的代码拿到项目中使用。
vue3封装ElMessageBox.confirm（确认框），避免提示信息重复写代码。
choorn的博客
05-06 7576
Promise对象可以在成功或失败时分别执行两个回调函数，我们写好这两个函数传递给封装的代码，在相应位置调用这两个函数即可。确认框是一个Promise对象，与axios属于同种，我觉得所有Promise类的对象封装都可以参考此方法（有待验证）。
Ant Design Vue Popconfirm 实现回车确认（Enter 确认）
然后他就拿棍子来打我
04-25 626
操作的简单而紧凑的确认对话框。 现实 Enter 触发确认事件, events API 无法满足.
vue3 离开页面弹窗确认
柒个橙子的博客
05-09 574
在订单支付页面倒计时没结束就离开当前页时期望弹窗提示是否确认离开。
vue3项目中使用ant design vue气泡确认框展示信息供查看
qq_53821346的博客
04-24 2255
不过使用这样子的要注意一点：在这边显示的动态值要在这个位置写{{record.company.companyName}}--->(这个是需要显示的动态公司名称)，而不能在data.ts文件中的customRender：重新显示数据写法，会被覆盖！在实现公司项目的时候，看到了同事使用ant design vue的气泡确认框（popconfirm）这一插件来展示相关信息供直接点击可查看，减少弹窗出现，觉得是一种很不错的写法，先将其记录在这边，方便以后需要的时候可以在这边借鉴。这样子的写法则是通过。
【VUE】el-popconfirm失效，点击没有任何反应，刷新页面才能点击
weixin_41498246的博客
07-20 1042
el-popconfirm刷新才能点击问题临时解决办法
vue3 气泡弹出框
02-02
在Vue3项目中使用Ant Design Vue的气泡确认框（Popconfirm）可以通过以下步骤实现： 1. 首先，确保你已经安装了Ant Design Vue插件。你可以通过以下命令来安装： ```shell npm install ant-design-vue@next --save ...
vue3项目 - 封装确认框组件
m0_50125215的博客
08-25 2119
目的：通过vue实例调用$confirm函数弹出确认框。import导入函数使用也需要支持。 分析功能 实现组件基础结构和样式。 实现函数式调用组件方式和完成交互。 加上打开时动画效果。 给购物车删除加上确认框。 给vue挂载原型函数$confirm 实现函数式调用组件方式和完成交互 封装确认框组件 xtx-confirm.vue <template> <div class="xtx-confirm"> <div class="wrapper" ref=.
Vue3封装可复用组件-Confirm
m0_46444000的博客
04-02 3668
一看就懂, 直接上手
vue3 函数式封装confirm组件
Shiqi_777的博客
01-16 731
在每次使用confirm组件时都要写个标签，再一顿操作，感觉很繁琐今天我便花了一点时间封装了一个函数式调用的confirm组件。
Vue3电商项目实战-购物车模块4【11-购物车页面-确认框组件】
m0_52896752的博客
03-05 521
Vue3电商项目实战-购物车模块4【11-购物车页面-确认框组件】
vue3-confirm组件封装
Shiqi_777的博客
07-22 874
vue3-confirm组件封装
【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案
bbt953的博客
04-18 7051
【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案
vue下elmentui中 el-popconfirm 气泡确认框
weixin_50450473的博客
04-25 7131
问题描述：点击el-popconfirm 气泡确认框时，同时会影响外层div的@click事件的弹出 解决方法：为el-popconfirm标签里层的el-button标签加上 @click.stop="" 事件即可 <div v-for="(chi,chiIndex) in me.children" :key="chiIndex" @click="toDetail(chi,me.type)"> <div>标题</div> <el-popc....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值