Skip to content

创建Modal弹窗带默认按钮组件模板

vue
<template>
	<div class="create-modal-pop">
		<!-- 请更改根节点 class 名称 -->
		<!-- ... -->
	</div>
</template>

<script setup lang="tsx">
import type { CreateModalProps } from './interface';
import type { PageExpose } from '@erp/biz';

/**
 * 入参
 */
const props = withDefaults(defineProps<CreateModalProps>(), {
	// 默认值 TODO
	// ...
});

/**
 * 主动触发事件
 */
const emit = defineEmits(['ok', 'close', 'loading']);

// 其他.... TODO

/**
 * 给Modal调用的
 */
defineExpose<PageExpose>({
	/**
	 * 返回给调用方, 返回 false 表示不关闭弹窗,true | Record<string, any> 表示关闭弹窗,并返回值
	 */
	async getModel() {
		// 确定逻辑 TODO
		return true;
	},
});
</script>

<style lang="scss" scoped>
.create-modal-pop {
	// 请更改根节点 class 名称 TODO
	// ...
}
</style>
ts
/**
 * @zh 弹窗入参声明
 */
export interface CreateModalProps {
	// 请更改 props 名称,以 Props 结尾
	// ....
}
ts
import { pop } from '@erp/biz';
import type { CreateModalProps } from './interface';

/**
 * @zh 创建弹窗 命名都为create{Xxxx}Pop TODO
 * @returns
 */
export function createCreateModalPop(props: CreateModalProps) {
	return pop.createModal(import('./create-modal.vue'), props, {
		// 弹窗的配置 TODO
		// title
		// width
	});
}

基于 MIT 许可发布