|
|
|
|
@ -0,0 +1,35 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="p-5 space-y-5 !bg-gray-100">
|
|
|
|
|
<el-card header="element plus中使用messageBox的内容支持html(不使用jsx)">
|
|
|
|
|
<el-button @click="showMessageBox"> 点击弹出确认框 </el-button>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
|
|
|
|
|
|
|
const showMessageBox = () => {
|
|
|
|
|
ElMessageBox.confirm('<div> <h1>这是一个h1标签</h1><br/><p>这是一个p标签</p> </div>', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
dangerouslyUseHTMLString: true, // 这句是重点,支持message内容转为html格式
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '删除成功!',
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: 'info',
|
|
|
|
|
message: '取消删除',
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped></style>
|