普元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"/>

最终效果如下:

相关推荐
蜚鸣8 小时前
Vue的快速入门
vue
吃饭最爱1 天前
⽹络请求Axios的概念和作用
vue
魂尾ac2 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐2 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52143 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦3 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君3 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手4 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO4 天前
分类别柱状图(Vue3)
typescript·vue·echarts