feat(naive-ui): 添加 Modal 命令式 API 支持并完善类型声明
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { useDialog, useMessage } from 'naive-ui';
|
||||
import { useDialog, useMessage, useModal } from 'naive-ui';
|
||||
import type { MessageType } from 'naive-ui';
|
||||
|
||||
definePage({ meta: {} });
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const modal = useModal();
|
||||
|
||||
const messageTypes = ['info', 'success', 'warning', 'error', 'loading'] satisfies MessageType[];
|
||||
const dialogTypes = ['info', 'success', 'warning', 'error'] as const;
|
||||
@@ -35,6 +36,23 @@ const openDialog = (type: (typeof dialogTypes)[number]) => {
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
modal.create({
|
||||
title: '命令式 Modal 示例',
|
||||
content: '这是一个命令式 API 创建的 Modal 示例,使用 preset="dialog"。',
|
||||
preset: 'dialog',
|
||||
maskClosable: false,
|
||||
onPositiveClick: () => {
|
||||
message.success('点击了确定');
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
message.error('点击了取消');
|
||||
},
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -70,6 +88,12 @@ const openDialog = (type: (typeof dialogTypes)[number]) => {
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NCard>
|
||||
|
||||
<NCard title="Modal 弹窗 (命令式 API)" class="mt-4">
|
||||
<NSpace>
|
||||
<NButton @click="openModal"> 打开 Modal </NButton>
|
||||
</NSpace>
|
||||
</NCard>
|
||||
</NCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user