Skip to content

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

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

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

/**
 * 入参
 */
const props = withDefaults(defineProps<CreateDrawerProps>(), {
	// 默认值 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-drawer-pop {
	// 请更改根节点 class 名称 TODO
	// ...
}
</style>
ts
/**
 * @zh 弹窗入参声明
 */
export interface CreateDrawerProps {
	// 请更改 props 名称,以 Props 结尾
	// ....
}
ts
import { pop } from '@erp/biz';
import type { CreateDrawerProps } from './interface';

/**
 * @zh 创建弹窗 命名都为create{Xxxx}Pop TODO
 * @returns
 */
export function createCreateDrawerPop(props: CreateDrawerProps) {
	return pop.createDrawer(import('./create-drawer.vue'), {
		model: props,
		// 侧边栏的配置 TODO
		// title
		// width
	});
}

基于 MIT 许可发布