@smalljelly/public-dynamic-template
云实验室项目动态组件集合
Build Setup
安装 public-dynamic-template 组件,npm i @smalljelly/public-dynamic-template
引入组件
1.在项目的 main.ts 文件中引入组件
// 导入动态组件
import DynamicPublic from '@smalljelly/public-dynamic-template'
DynamicPublic.pubGlobalInit({
$NotificationFormSub: app.config.globalProperties.$NotificationFormSub,
$NotificationPubSub: app.config.globalProperties.$NotificationPubSub,
$goTo: app.config.globalProperties.$goTo,
router,
$Http,
isHidden,
dictionary,
XEUtils,
formInfoStore,
SEARCHFORM,
RESETVERIFY,
INFOSERVE,
DYNAMICLAYERCLEAR,
DYNAMICLAYERTABLEDATA,
DYNAMICLAYERFORM,
DYNAMICLAYERTABLE,
RESETTABLE,
DYNAMICLAYERUPLOAD,
DYNAMICLOCALICONS,
DYNAMICLOCALTABLE,
SELECTSERVE,
LOCALSUBSERVE,
SEARCHSERVE,
RADIOSERVE,
INITSERVE,
addressDataJson,
getDictionaryList,
dictionaryFn,
timeFilter,
useUserStoreWithOut,
uploadUrl
});//需要初始化变量
app.use(DynamicPublic)
2.在页面中使用组件 目前有三个组件 DynamicForm, DynamicLayer, DynamicTable,
<template>
<DynamicForm :config="config" :questions="questions"></DynamicForm>
</template>
<script setup>
import homeService from './group.service'
let config:any= {
queryUrl: 'TokenAuth/Authenticate',
addUrl: 'TokenAuth/Authenticate',
layout: 'vertical',
grid: 6, //分栏
rowKey: 'key',
labelCol: { //label 固定宽度
style: { width: '240px' }
}, //label的占比
// cancelSave: true, //隐藏底部按钮
combinationMethod(data: any) {
return data
},
beforeWithMethod(data: any) {
return data
},
}
let questions: any = reactive(homeService.getQuestions());
//group.service.ts详细配置参考项目里面demno
</script>
What's Changed