Skip to content

动态表单自定义组件代码模板

vue
<template>
	<div class="df-custom-component">
		<!-- 请更改根节点 class 名称 -->
		<!-- ... -->
	</div>
</template>

<script setup lang="tsx">
import { computed, reactive } from 'vue';
import { Input, UPDATE_MODEL, pop } from '@erp/biz';
import type { DynamicFieldComponentExpose, DynamicFieldComponentProps } from '@erp/biz';

/**
 * 字段内部属性,对应的是 FormField 配置的 componentProps
 */
interface InnerProps {
	// ...
	/**
	 * demo 属性
	 */
	type: string;
}

const props = defineProps<DynamicFieldComponentProps<InnerProps>>();

const emit = defineEmits([UPDATE_MODEL]);

// ... 其他逻辑

defineExpose<DynamicFieldComponentExpose>({
	async validate() {
		pop.success('校验成功');
		return true;
	},
});
</script>

<style lang="scss" scoped>
.df-custom-component {
	// ...
}
</style>

基于 MIT 许可发布