ElementPlus Popconfirm 氣泡確認(rèn)框

Popconfirm 氣泡確認(rèn)框

點擊元素，彈出氣泡確認(rèn)框。

基礎(chǔ)用法

Popconfirm 的屬性與 Popover 很類似，因此對于重復(fù)屬性，請參考 Popover 的文檔，在此文檔中不做詳盡解釋。

在 Popconfirm 中，只有 title 屬性可用，content 屬性不會被展示。

<template>
  <el-popconfirm title="這是一段內(nèi)容確定刪除嗎？">
    <template #reference>
      <el-button>刪除</el-button>
    </template>
  </el-popconfirm>
</template>

自定義

可以在 Popconfirm 中自定義內(nèi)容。

<template>
  <el-popconfirm
    confirmButtonText="好的"
    cancelButtonText="不用了"
    icon="el-icon-info"
    iconColor="red"
    title="這是一段內(nèi)容確定刪除嗎？"
  >
    <template #reference>
      <el-button>刪除</el-button>
    </template>
  </el-popconfirm>
</template>

觸發(fā)事件

點擊按鈕觸發(fā)事件

<template>
  <el-popconfirm
    confirmButtonText="確定"
    cancelButtonText="取消"
    icon="el-icon-info"
    iconColor="red"
    title="這是一段內(nèi)容確定刪除嗎？"
    @confirm="confirmEvent"
    @cancel="cancelEvent"
  >
    <template #reference>
      <el-button>刪除</el-button>
    </template>
  </el-popconfirm>
</template>

<script>
  export default {
    methods: {
      confirmEvent() {
        console.log('confirm!')
      },
      cancelEvent() {
        console.log('cancel!')
      },
    },
  }
</script>

Attributes

Slot

Events