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

1 前言

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

这个base基座到底是什么?

base基座能提供哪些功能?

本文将进行简单的介绍。

2 高开前端引用base基座

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

javascript 复制代码
<script>

import { BaseVue, AjaxUtil } from 'base/lib'

export default {
    data() {
        return {
            
        };
    },
    methods: {
        
    },
    
};  
</script>  

3 base基座有哪些类库

3.1 基本BaseVue

引用语法:

javascript 复制代码
import { BaseVue } from 'base/lib'

3.2 Ajax类库

引入语法

javascript 复制代码
import { AjaxUtil } from 'base/lib'

使用语法:

javascript 复制代码
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组件

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

javascript 复制代码
<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 下拉选择字典

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

javascript 复制代码
<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(默认 ' ,') 多选时分隔符

4.2 二维码组件

在页面嵌入如下代码:

javascript 复制代码
<qrcode value="abcde"/>

最终效果如下:

相关推荐
叫我阿柒啊2 小时前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
刺客-Andy1 天前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue
獨孤殤1 天前
Flutter + Web:深度解析双向通信的混合应用开发实践
前端·flutter·vue
BYSJMG1 天前
基于Python毕业设计推荐:基于Django的全国降水分析可视化系统
hadoop·python·django·vue·毕业设计·课程设计·毕设
zkkkkkkkkkkkkk2 天前
vue组件中实现鼠标右键弹出自定义菜单栏
javascript·vue.js·vue
伍哥的传说2 天前
Vite 插件 @vitejs/plugin-legacy 深度解析:旧浏览器兼容指南
vite·前端开发·vue3.js·polyfill·plugin-legacy·core-js·ie 11
她似晚风般温柔7892 天前
SpringBoot3 + Netty + Vue3 实现消息推送(最新)
java·websocket·spring·vue·netty
瓯雅爱分享2 天前
Java搭建高效后端,Vue打造友好前端,联合构建电子采购管理系统,实现采购流程电子化、自动化,涵盖采购全周期管理,功能完备,附详细可运行源码
java·mysql·vue·软件工程·源代码管理
williamdsy2 天前
【Element-Plus】媒体预览模态框优化实战:从复杂到简洁的设计之路
vue·媒体·element-plus
叫我阿柒啊3 天前
从Java全栈开发到微服务架构:一次真实的面试实录
java·微服务·vue3·springboot·前端开发·后端开发·项目经验