06.自定义页面组件（专题案例）
输入“/”快速插入内容
06.自定义页面组件（专题案例）
06.自定义页面组件（专题案例）
用户1194用户1194
用户9829用户9829
用户2379用户2379用户7263用户72632025年12月15日修改
相关文档：
08.自定义页面组件（开发指南）
1.
如何开发一个vue3简易自定义页面组件
技术栈
Vue3 （版本 : 3.5.2）、 Element Plus (版本 : 2.4.4)
实现效果
案例代码
👉
重要说明
1、本系统对 Element Plus 启用自定义命名空间（el → ep），确保样式隔离与一致性
2、请为每个组件设置规范的最外层类名（推荐：custom-pageComponent-组件英文标识），并结合 CSS 作用域scoped，可有效隔离样式，防止组件间相互影响。
index.html
代码块
<template>
<!-- 系统对 Element Plus 启用自定义命名空间（el → ep），确保样式隔离与一致性 -->
<div class="custom-pageComponent-elementPlusExample">
<ep-form
ref="formRef"
:model="numberValidateForm"
labep-width="100px"
>
<ep-form-item
label="年龄"
prop="age"
:rules="[
{ required: true, message: '年龄不能为空' },
{ type: 'number', message: '年龄必须为数字值' }
]"
>
<ep-input
type="age"
v-model.number="numberValidateForm.age"
autocomplete="off"
style="width: 360px;"
></ep-input>
</ep-form-item>
<ep-form-item>
<ep-button type="primary" @click="submitForm()"
>提交</ep-button
>
<ep-button @click="resetForm()">重置</ep-button>
</ep-form-item>
</ep-form>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
// 引入 element-plus相关API
import { EpMessage } from 'element-plus'
const props = defineProps({
// 环境变量，console管理平台 / runtime 运行PC/ mruntime 运行移动
devMode: {
default: 'runtime'
},
// IDE中的event配置+setting配置
config: {
default: {}
},
// 页面组件建模配置
setting: {
default: {}
},
// 根据事件名调用组件自身配置的JS代码，Function({eventName: 'xxx'}) xxx为对应方法名
_triggerScriptEvent: {
default: () => {}
},
// 执行组件内的服务端函数，Function({name: 'xxx'}) xxx为函数名
_excuteServerAPI: {
default: () => {}
},
// 获取数据过滤返回的数据， Function({paramsName: 'xxx'}) xxx为数据过滤属性的key
_executeDataFilterSetterAPI: {
default: () => {}
},
_executeCommonEventsSetterAPI: {
default: () => {}
},
// 获取对应组件实例数据对象集合
_getComponentListMap: {
default: () => {}
},
// 根据组件实例id，获取对应组件的是实例
_getComponentInstanceById: {
default: () => {}
},
// 工具类
utils: {
default: {}
}
})
const numberValidateForm = reactive({
age: ''
})
const formRef = ref(null)
const submitForm = async () => {
if (!formRef.value) return
try {
const valid = await formRef.value.validate()
if (valid) {
EpMessage.success('提交成功!')
// 或使用 alert('submit!')
}
} catch (error) {
console.log('error submit!!', error)
EpMessage.error('表单验证失败')
}
}
const resetForm = () => {
if (formRef.value) {
formRef.value.resetFields()
}
}
</script>
<style scoped>
.custom-pageComponent-elementPlusExample{
padding: 20px;
}
// 自定义element-plus 按钮组件样式
.custom-pageComponent-elementPlusExample .ep-form-item {
margin-bottom: 22px;
}
</style>