Vue3弹出确认(Popconfirm)

75 篇文章 4 订阅
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>
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值