mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
dd6cb9b668
* docs(docs): fix customized icon example for consistency with other demos This PR fixes the Customized Icon example in Message-box to make it consistent with others. Added confirmButtonText and cancelButtonText options to avoid default Chinese labels. Added ElMessage success and cancel feedback after confirmation or cancellation. Ensured the example behavior matches other MessageBox demos. * docs(docs): add import --------- Co-authored-by: Linzx <14808625+sheldorplus@user.noreply.gitee.com>
35 lines
739 B
Vue
35 lines
739 B
Vue
<template>
|
|
<el-button plain @click="open">Click to open Message Box</el-button>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { markRaw } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { Delete } from '@element-plus/icons-vue'
|
|
|
|
const open = () => {
|
|
ElMessageBox.confirm(
|
|
'It will permanently delete the file. Continue?',
|
|
'Warning',
|
|
{
|
|
confirmButtonText: 'OK',
|
|
cancelButtonText: 'Cancel',
|
|
type: 'warning',
|
|
icon: markRaw(Delete),
|
|
}
|
|
)
|
|
.then(() => {
|
|
ElMessage({
|
|
type: 'success',
|
|
message: 'Delete completed',
|
|
})
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: 'info',
|
|
message: 'Delete canceled',
|
|
})
|
|
})
|
|
}
|
|
</script>
|