Popconfirm

A simple confirmation dialog of an element click action.

Basic usage

Basic usage of popconfirm.

Custom button

Customize the text or icon of the button.

popconfirm supports 12 different positions. They are: upper left upper upper right lower left down lower right upper left left lower left upper right right lower right.

<template>
  <tu-configProvider :locale="en">
    <div :style="{ position: 'relative', width: '440px', height: '280px' }">
      <tu-popconfirm content="Are you sure to delete this?" position="tl">
        <tu-button style="position: absolute; top: 0; left: 90px">
          tl
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="top">
        <tu-button style="position: absolute; top: 0; left: 180px">
          top
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="tr">
        <tu-button style="position: absolute; top: 0; left: 280px">
          tr
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="bl">
        <tu-button style="position: absolute; top: 240px; left: 80px">
          bl
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="bottom">
        <tu-button style="position: absolute; top: 240px; left: 180px">
          bottom
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="br">
        <tu-button style="position: absolute; top: 240px; left: 280px">
          br
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="lt">
        <tu-button style="position: absolute; top: 60px; left: 10px">
          lt
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="left">
        <tu-button style="position: absolute; top: 120px; left: 10px">
          left
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="lb">
        <tu-button style="position: absolute; top: 180px; left: 10px">
          lb
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="rt">
        <tu-button style="position: absolute; top: 60px; left: 350px">
          rt
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="right">
        <tu-button style="position: absolute; top: 120px; left: 350px">
          right
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="rb">
        <tu-button style="position: absolute; top: 180px; left: 350px">
          rb
        </tu-button>
      </tu-popconfirm>
    </div>
  </tu-configProvider>
</template>

<script lang="ts" setup>
import { en } from 'tu-view-plus/locale/index.mjs';
</script>

<style scoped lang="scss">
.tu-button {
  width: 80px;
}
</style>

<template>
  <tu-configProvider :locale="en">
    <div :style="{ position: 'relative', width: '440px', height: '280px' }">
      <tu-popconfirm content="Are you sure to delete this?" position="tl">
        <tu-button style="position: absolute; top: 0; left: 90px">
          tl
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="top">
        <tu-button style="position: absolute; top: 0; left: 180px">
          top
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="tr">
        <tu-button style="position: absolute; top: 0; left: 280px">
          tr
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="bl">
        <tu-button style="position: absolute; top: 240px; left: 80px">
          bl
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="bottom">
        <tu-button style="position: absolute; top: 240px; left: 180px">
          bottom
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="br">
        <tu-button style="position: absolute; top: 240px; left: 280px">
          br
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="lt">
        <tu-button style="position: absolute; top: 60px; left: 10px">
          lt
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="left">
        <tu-button style="position: absolute; top: 120px; left: 10px">
          left
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="lb">
        <tu-button style="position: absolute; top: 180px; left: 10px">
          lb
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="rt">
        <tu-button style="position: absolute; top: 60px; left: 350px">
          rt
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="right">
        <tu-button style="position: absolute; top: 120px; left: 350px">
          right
        </tu-button>
      </tu-popconfirm>
      <tu-popconfirm content="Are you sure to delete this?" position="rb">
        <tu-button style="position: absolute; top: 180px; left: 350px">
          rb
        </tu-button>
      </tu-popconfirm>
    </div>
  </tu-configProvider>
</template>

<script lang="ts" setup>
import { en } from 'tu-view-plus/locale/index.mjs';
</script>

<style scoped lang="scss">
.tu-button {
  width: 80px;
}
</style>

Type

The type of the confirmation box can be set via the type property.

Popconfirm API

Popconfirm Attributes

Name	Description	Type	Default
popup-visible / v-model	Whether the popconfirm is visible	`Boolean`	-
default-popup-visible	Whether the popconfirm is visible by default (uncontrolled mode)	`Boolean`	false
content	content	`String`	-
position	Popup position	`String`	top
type	Types of the popconfirm	`String`	info
ok-text	The content of the ok button	`String`	-
cancel-text	The content of the cancel button	`String`	-
ok-loading	Whether the ok button is in the loading state	`Boolean`	false
ok-button-props	Whether the ok button is in the loading state	`ButtonProps`	-
cancel-button-props	Props of cancel button	`ButtonProps`	-
content-class	The class name of the popup content	`ClassName`	-
content-style	The style of the popup content	`CSSProperties`	-
arrow-class	The class name of the popup arrow	`ClassName`	-
arrow-style	The style of the popup arrow	`CSSProperties`	-
popup-container	Mount container for popup	`String` `HTMLElement` `null` `undefined`	-
on-before-ok	The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.	`Function`	-
on-before-cancel	The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.	`Function`	-

Popconfirm Events

Name	Description	Type
popup-visible-change	Triggered when the visible or hidden state of the bubble confirmation box changes.	`Function`
ok	Triggered when the confirm button is clicked.	-
cancel	Triggered when the cancel button is clicked.	-

Popconfirm Slots

Name	Description
icon	Icon
content	Content

Popconfirm ​

Basic usage ​

Custom button ​

Popup position ​

Type ​

Popconfirm API ​

Popconfirm Attributes ​

Popconfirm Events ​

Popconfirm Slots ​