Dialog
dialog 使用命令式来进行开关, 减少代码冗余
基础使用
使用 Dialog 渲染控制关闭
<template>
<Dialog :confirm="confirm" ref="dialogRef"> 点击确定3s后关闭 </Dialog>
<ElButton @click="openDialog">open</ElButton>
</template>
<script lang="tsx" setup>
import { ref } from "vue";
const dialogRef = ref();
const confirm = (done) => {
setTimeout(() => {
done();
}, 3000);
};
const cancel = () => {};
const openDialog = () => {
dialogRef.value.open({
title: "标题",
});
};
</script>
显示代码
去除操作栏
使用 disabled 去除操作栏
<template>
<Dialog ref="dialogRef"> hello </Dialog>
<ElButton @click="openDialog">open</ElButton>
</template>
<script lang="tsx" setup>
import { ref } from "vue";
const dialogRef = ref();
const openDialog = () => {
dialogRef.value.open({
disabled: true,
title: "标题",
});
};
</script>
显示代码
按钮文字修改
使用 cancelText、confirmText 修改按钮文案
<template>
<Dialog
confirmText="暂存"
cancelText="返回"
:confirm="confirm"
ref="dialogRef"
>
点击确定3s后关闭
</Dialog>
<ElButton @click="openDialog">open</ElButton>
</template>
<script lang="tsx" setup>
import { ref } from "vue";
const dialogRef = ref();
const confirm = (done) => {
setTimeout(() => {
done();
}, 3000);
};
const cancel = () => {};
const openDialog = () => {
dialogRef.value.open({
title: "标题",
});
};
</script>
显示代码