当前位置：首页 > news >正文

普元EOS-微前端的base基座介绍

news 来源：原创 2024/9/20 12:44:46

1 前言

微前端开发的时候要使用base基座。

这个base基座到底是什么？

base基座能提供哪些功能？

本文将进行简单的介绍。

2 高开前端引用base基座

在高开页面引入base基座的语法如下：

<script>import { BaseVue, AjaxUtil } from 'base/lib'export default {data() {return {};},methods: {},};  
</script>

3 base基座有哪些类库

3.1 基本BaseVue

引用语法：

import { BaseVue } from 'base/lib'

3.2 Ajax类库

引入语法

import { AjaxUtil } from 'base/lib'

使用语法：

const ajax1 = AjaxUtil.headers(AjaxUtil.buildHeaders()).ajax;
ajax1.get('/api2/devops/pcm/dict/dict-entrys',{ params: { 'dictTypeId': 'DPS_PJM_PROJECT_TYPE' } }).then(resp1 => {console.log(resp1.data);}).catch(err => {this.resp1Info = 'Api请求' + '出现了异常，请联系管理员解决。';});
}

3.3 默认页面组件

在页面使用若干可视化组件，默认可视化组件无须配置，可直接使用。

本节列出所有标签的清单，至于说明和用例不会写很清楚，毕竟这些组件的使用例子不是一个表格能写清楚的，以后我会逐渐单独写一些文章来描述这些标签。

标签名	说明	用例
Dict
DownLoadFile	下载文件，注意只能是下载二进制的文件，并非下载任意Url资源，比如页面、css资源、js文件、图片等，是无法下载的
FloatingPane
IconColorPicker	颜色选择，这个控件感觉不完善，只能固定选择几个颜色。
NoData
PmDialog

3.4 components组件

这些组件需要应用才可以使用。

<template><div class="main-div"><!-- 查询区域 --><div class="div-ke1"><div class="search-bar"><Icon :value="value1" /><qrcode value="abcde"/></div></div></div>
</template><script>
import {Icon,PmSearch } from 'base/components'
export default {name: 'index',components:{Icon, PmSearch },data() {}
}

可以看到需要导入才可以使用。

4 高开页面使用基座组件

基座提供了若干可视化组件

4.1 下拉选择字典

在高开页面使用下面的代码，即可通过下拉选择字典

<template><div class="main-div"><div class="div-ke1"><Dict  v-model="sheng" dictTypeCode="gender" /></div></div>
</template>

使用 Dict标签并不需要特别的设置。

本例子中 dictTypeCode设置为 gender，即性别，对应的是AFCenter中的性别字典。

最终的效果如下：

具体的参数设置如下。

属性	类型	说明
v-model	String	绑定的值
dictTypeCode	String	字典类型编号
multiple	Boolean（默认false）	是否多选
cascade	Boolean（默认false）	是否级联
parentCode	String	父字典项编号
separator	String(默认 ‘ ，’)	多选时分隔符