mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
55348b30b6
* style: use prettier * style: just prettier format, no code changes * style: eslint fix object-shorthand, prefer-const * style: fix no-void * style: no-console
3.2 KiB
3.2 KiB
Popconfirm
要素のクリック操作の簡単な確認ダイアログです。
基本的な使い方
popconfirm は ポップオーバー と似ています。そのため、重複する属性については ポップオーバー のドキュメントを参照してください。
:::demo popconfirm では title
属性のみが利用可能で、content
属性は無視されます。
<template>
<el-popconfirm title="Are you sure to delete this?">
<template #reference>
<el-button>Delete</el-button>
</template>
</el-popconfirm>
</template>
:::
カスタマイズ
popconfirm は以下のようにカスタマイズすることができます。: :::demo
<template>
<el-popconfirm
confirmButtonText="OK"
cancelButtonText="No, Thanks"
icon="el-icon-info"
iconColor="red"
title="Are you sure to delete this?"
>
<template #reference>
<el-button>Delete</el-button>
</template>
</el-popconfirm>
</template>
:::
トリガーイベント
ボタンをクリックしてイベントを起動します。
:::demo
<template>
<el-popconfirm
confirmButtonText="Yes"
cancelButtonText="No"
icon="el-icon-info"
iconColor="red"
title="Are you sure to delete this?"
@confirm="confirmEvent"
@cancel="cancelEvent"
>
<template #reference>
<el-button>Delete</el-button>
</template>
</el-popconfirm>
</template>
<script>
export default {
methods: {
confirmEvent() {
console.log('confirm!')
},
cancelEvent() {
console.log('cancel!')
},
},
}
</script>
:::
属性
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
title | タイトル | String | — | — |
confirmButtonText | 確認ボタンのテキスト | String | — | — |
cancelButtonText | キャンセルボタンのテキスト | String | — | — |
confirmButtonType | 確認ボタンの種類 | String | — | Primary |
cancelButtonType | キャンセルボタンの種類 | String | — | Text |
icon | アイコン | String | — | el-icon-question |
iconColor | アイコンカラー | String | — | #f90 |
hideIcon | アイコンを隠すか | Boolean | — | false |
スロット
Name | Description |
---|---|
reference | Popconfirm をトリガーとする HTML 要素 |
イベント
Event Name | Description | Parameters |
---|---|---|
onConfirm | 確認ボタンをクリックするときのトリガー | — |
onCancel | キャンセルボタンをクリックするときのトリガー | — |