vue微乾坤子应用开发及ele组件开发时问题记录

一. 微乾坤

  1. 新增page页面路由,pmi权限中心配置正常,跳转链接正确,但路由未找到403.

        解决: 新增的配置是page类型,transformQianKunRoute方法转换微前端路由数据 时,过滤未兼容page型的路由, 解决 ['menu', 'page'].includes(v.resourceType)

// 转换微前端路由数据
function transformQianKunRoutes(routes) {return routes.filter(v => ['menu', 'page'].includes(v.resourceType)).map(data => {let path = data.resourceUrl.replace(/^\/hw/, '').replace(/\/\//g, '/')let componentPath = ROUTE_PATHS[path] || pathlet route = {id: data.resourceId,name: data.resourceName,path,meta: {id: data.resourceId,icon: '',title: data.resourceName},component: importViews(componentPath.replace(/^\//, '')),businessType: /^\/(\w+)?\/?/.exec(path)?.[1]}return route})
}

  2. 微乾坤子应用打包部署后,相关img/font字体资源路径未找到404

        尝试子应用webpack配置config.module.rule("fonts")输出publicPath配置路径,未果。

        2-1.解决: limit 设置大数值,打包时字体资源会转base64,从而绕过资源文件夹路径不对问题
config.module.rule("fonts").test(/\.(woff2?|eot|ttf|otf|ttc|woff)(\?.*)?$/i).use("url-loader").loader("url-loader").options({limit: 99999999,name: './src/assets/font/[name].[hash:8].[ext]',fallback: {loader: "file-loader",options: {name: `static/styles/[name].[ext]`}}}).end();
         2.2.解决: 在public文件夹内放置需要的font资源,在index.html上直接引入,引入路径带上环境变量配置 <%= BASE_URL %>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title></title><style>@font-face {font-family: "DIN-Medium";src: url("<%= BASE_URL %>font/DIN-Medium.otf") format("truetype");}@font-face {font-family: 'PingFangSC';src: url("<%= BASE_URL %>font/PingFangMedium.ttf") format('truetype');}@font-face {font-family: 'element-icons';src: url("<%= BASE_URL %>font/element-icons.woff") format("woff"),url("<%= BASE_URL %>font/element-icons.ttf") format("truetype");font-weight: 400;font-display: "auto";font-style: normal}</style>
</head>

二. element-ui组件

  1.ele-locale 国际化多语言少配置,导致el组件部分文本无文本的问题

     自己配置引用的locale/cn.js文件会覆盖ele源码内的locale,需要完整的locale-cn配置内容,不然会导致el-time-picker,el-date-picker等所有ele组件的文本渲染无文本的问题,

cn.js

export default {el: {colorpicker: {confirm: '确定',clear: '清空'},datepicker: {now: '此刻',today: '今天',cancel: '取消',clear: '清空',confirm: '确定',selectDate: '选择日期',selectTime: '选择时间',startDate: '开始日期',startTime: '开始时间',endDate: '结束日期',endTime: '结束时间',prevYear: '前一年',nextYear: '后一年',prevMonth: '上个月',nextMonth: '下个月',year: '年',month1: '1 月',month2: '2 月',month3: '3 月',month4: '4 月',month5: '5 月',month6: '6 月',month7: '7 月',month8: '8 月',month9: '9 月',month10: '10 月',month11: '11 月',month12: '12 月',// week: '周次',weeks: {sun: '日',mon: '一',tue: '二',wed: '三',thu: '四',fri: '五',sat: '六'},months: {jan: '一月',feb: '二月',mar: '三月',apr: '四月',may: '五月',jun: '六月',jul: '七月',aug: '八月',sep: '九月',oct: '十月',nov: '十一月',dec: '十二月'}},select: {loading: '加载中',noMatch: '无匹配数据',noData: '无数据',placeholder: '请选择'},cascader: {noMatch: '无匹配数据',loading: '加载中',placeholder: '请选择',noData: '暂无数据'},pagination: {goto: '前往',pagesize: '', // 主要为了XX-ui规范,分页位置不显示'分/页' 字样total: `{total} 条`,pageClassifier: '页'},messagebox: {title: '提示',confirm: '确定',cancel: '取消',error: '输入的数据不合法!'},upload: {deleteTip: '按 delete 键可删除',delete: '删除',preview: '查看图片',continue: '继续上传'},table: {emptyText: '暂无数据',confirmFilter: '筛选',resetFilter: '重置',clearFilter: '全部',sumText: '合计'},tree: {emptyText: '暂无数据'},transfer: {noMatch: '无匹配数据',noData: '无数据',titles: ['列表 1', '列表 2'],filterPlaceholder: '请输入搜索内容',noCheckedFormat: '共 {total} 项',hasCheckedFormat: '已选 {checked}/{total} 项'},image: {error: '加载失败'},pageHeader: {title: '返回'},popconfirm: {confirmButtonText: '确定',cancelButtonText: '取消'},empty: {description: '暂无数据'}}
};

2.el-tabs 的下标线,初始化时未有下标线

 用document.getElementsByClassName获取元素及宽度值
 初次未点击触发active时,直接设置第一个el-tabs__active-bar的宽度。

mounted() {
// 初始-默认选项的选中下标线, 20 是 el-tabs__item的左右padding值setTimeout(() => {this.$nextTick(() => {const itemDom = document.getElementsByClassName('el-tabs__item')[0]// console.log('el-tabs__item_text_Dom', itemDom, itemDom.clientWidth)const activeBarElement = document.getElementsByClassName('el-tabs__active-bar')[0]activeBarElement.style.width = String(itemDom.clientWidth - 20)+ 'px';})     })
} 

3.el-switch 加底部背景文字activeText-问题

    采用props配置isChecked + className样式一起控制 文字左右位置显示

<template><div class="switch-wrapper"><el-switch   :isChecked="isChecked"@change="(e) => switchChange(e)"/><div v-if="showLabel && activeText && isChecked" class="label right">{{ activeText }}</div><div v-if="showLabel && inactiveText && !isChecked" class="label left">{{ inactiveText}}</div></div>
</template>
<script>export default {props: {inactiveText: {type: String,   default: '启用'           },activeText: {type: String,   default: '停用'           }, showLabel: Boolean,   isChecked: { type: Boolean, default: false }},watch: {value(newVal, oldVal) {if (newVal !== oldVal) {// console.log('watch()-newVal', newVal)this.switchChange(newVal)}}   },methods: {switchChange(e) {// console.log('switchChange()-', e)this.$emit('change', e)},}}
</script><style lang='scss' scoped>
.switch-wrapper {display: inline-flex;align-items: center;vertical-align: middle;position: relative;.label {position: absolute;//margin-left: 8px;line-height: 1em;color: var(--bg-color);}.label.right{left: 7rem;// width: 100%;text-align: center;cursor: pointer;}.label.left{right:7rem;// width: 100%;text-align: center;cursor: pointer;}// .el-switch__core { // width: 56rem !important;}
}
</style>

4.el-popover 位置自动更新问题

通过ref获取el-popover组件-直接执行源码自带的 updatePopper() 方法

 this.$nextTick(() => {this.$refs.PickerInput.$refs.elPopover.updatePopper()
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/240625.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react中使用redux最简单最方便的方式,配合rematch简化操作,5分钟学会

react中使用状态管理的方式也很多&#xff0c;比如redux和mobx等&#xff0c;今天这一片就讲一下redux的入门到熟练使用&#xff0c;主要是要理解它redux的组成有哪些&#xff0c;到怎么创建&#xff0c;和组建中怎么使用三个问题。这里先放上官网文档&#xff0c;不理解的地方…

十一.约束(二)

约束 5.自增列:AUTO_INCREMENT5.1作用5.2关键字5.3特点和要求5.4如何指定自增约束5.5如何删除自增列5.6MySQL8.0新特性——自增变量的持久化 6.FOREIGN KEY 约束6.1作用6.2关键字6.3主表和从表/父表和子表6.4特点6.5添加外键约束6.6演示问题6.7约束等级6.8删除外键约束6.9开发场…

鸿蒙开发者工具安装及入门程序

下载工具DevEco Studio IDE 官网下载&#xff1a;HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 开发工具的安装 解压下载好的压缩包&#xff0c;一路无脑安装即可&#xff0c;安装完的使用方法类似于IDEA、WebStorm的使用&#xff0c;快捷键一致&#xff0c;默认黑…

【笔记】Spring的循环依赖

Spring的循环依赖 ObjectFactory:函数式接口&#xff0c;可以将lambda表达式作为参数放在方法的实参种&#xff0c;在方法执行的时候&#xff0c;并不会实际的调用当前lambda表达式&#xff0c;只有在调用getObject方法的时候才回去调用lambda表达式 为什么spring要用三级缓存…

常用的百兆网络变压器与RJ45网口的参考连接电路有哪些,主要注意事项在哪里呢?

Hqst华轩盛(石门盈盛)电子导读&#xff1a;一起来了解常用的百兆网络变压器与RJ45网口的参考连接电路有哪些&#xff0c;主要注意事项在哪里呢&#xff1f; 第一,常用的百兆网络变压器与RJ45网口的参考连接电路 常用百兆网络变压器与网口连接器分开为独立电子元件的分离式参考电…

TrustZone之与非安全虚拟化交互

到目前为止&#xff0c;我们在示例中忽略了非安全状态中可能存在的虚拟化程序。当存在虚拟化程序时&#xff0c;虚拟机与安全状态之间的许多通信将通过虚拟化程序进行。 例如&#xff0c;在虚拟化环境中&#xff0c;SMC用于访问固件功能和可信服务。固件功能包括诸如电源管理之…

Ubuntu 常用命令之 top 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 top命令是Linux下常用的性能分析工具&#xff0c;可以实时动态地查看系统中各个进程的资源占用状况&#xff0c;类似于Windows的任务管理器。它可以显示系统总的和分区的CPU使用率、内存使用率、交换区使用率、系统负载、进程数、…

MFC静态链接+libtiff静态链接提示LNK2005和LNK4098

编译报错 1>msvcrt.lib(ti_inst.obj) : error LNK2005: "private: __thiscall type_info::type_info(class type_info const &)" (??0type_infoAAEABV0Z) 已经在 libcmtd.lib(typinfo.obj) 中定义 1>msvcrt.lib(ti_inst.obj) : error LNK2005: "pr…

BUUCTF-Linux Labs

Linux Labs 根据题目给出的内容&#xff0c;在kali中连接靶机&#xff0c;输入密码进入命令行模式 ls发现什么都没有&#xff0c;有可能进入到了一个空文件夹 cd .. 切换到上一层目录&#xff0c;ls查看此目录下的内容&#xff0c;发现flag.txt文件&#xff0c;查看文件是flag …

超维空间S2无人机使用说明书——32、使用yolov7进行目标识别

引言&#xff1a;为了提高yolo识别的质量&#xff0c;提高了yolo的版本&#xff0c;改用yolov7进行物体识别&#xff0c;同时系统兼容了低版本的yolo&#xff0c;包括基于C的yolov3和yolov4&#xff0c;也有更高版本的yolov8。 简介&#xff0c;为了提高识别速度&#xff0c;系…

w15初识php基础

一、计算100之内的偶数之和 实现思路 所有的偶数除2都为0 代码实现 <?php # 记录100以内的偶数和 $number1; $num0; while($number<100){if($number%20){ $num$number;}$number1; } echo $num; ?>输出的结果 二、计算100之内的奇数之和 实现思路 所有的奇数除…

HTML+CSS做一个时尚柿子造型计时器

文章目录 💕效果展示💕代码展示HTMLJS💕效果展示 💕代码展示 HTML <!DOCTYPE html> <html lang

使用低代码工具构建电商平台:简化开发流程,加速应用搭建

在数字化时代&#xff0c;电商平台成为了各类企业的重要组成部分。然而&#xff0c;传统的软件开发过程往往漫长而复杂&#xff0c;需要大量的编码和调试工作。随着低代码工具的出现&#xff0c;开发者可以通过简化的方式来搭建电商平台应用&#xff0c;从而更快速地满足业务需…

surface pro重置win10后没微软账号如何登录

Surface pro官方镜像恢复详细图文步骤-CSDN博客 如果不懂重置系统请看上面的链接 win10-win11都开始默认要求输入微软账号才能使用。但依然有入口可以给没微软账号的用户使用的 第一步&#xff0c;重置后会要求连互联网&#xff0c;这一步要自己找个网络连接上&#xff0c;不…

十大经典排序算法(个人总结C语言版)

文章目录 一、前言二、对比1.排序算法相关概念1.1 时间复杂度1.2 空间复杂度1.3 排序方式1.4 稳定度 2.表格比较3.算法推荐3.1 小规模数据3.2 中等规模数据3.3 大规模数据3.4 特殊需求 三、排序算法1.冒泡排序&#xff08;Bubble Sort&#xff09;1.1 简介1.2 示例代码&#xf…

智能酒精壁炉在户外装饰中展现的独特魅力

智能酒精壁炉&#xff0c;一种独特的户外装饰和实用性产品&#xff0c;以其独有的魅力在户外场景中迅速赢得了人们的喜爱和欢迎。 在露营时&#xff0c;智能酒精壁炉由于便携性&#xff0c;可以很轻松地携带到露营地点。并且无需外接电源或气体&#xff0c;为露营者提供了简单而…

swing快速入门(二十五)

注释很详细&#xff0c;直接上代码 新增内容 1.ImageIO.write读取并显示图片 2.ImageIO.writeImageIO.write读取并保存图片 package swing21_30;import javax.imageio.ImageIO; import java.awt.*; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent…

使用web_video_server进行网页段的视频传输

引言&#xff1a;在项目中&#xff0c;需要实现无人机摄像头采集到的图像回传到window下进行查看&#xff0c;为此&#xff0c;选择使用web_video_server功能包实现局域网下的图像传输 硬件环境&#xff1a; 硬件&#xff1a;Jetson orin nano 8G D435摄像头 环境&#xff…

电子病历编辑器源码,提供电子病历在线制作、管理和使用的一体化电子病历解决方案

概述&#xff1a; 电子病历是指医务人员在医疗活动过程中,使用医疗机构信息系统生成的文字、符号、图表、图形、数据、影像等数字化信息,并能实现存储、管理、传输和重现的医疗记录,是病历的一种记录形式。 医院通过电子病历以电子化方式记录患者就诊的信息&#xff0c;包括&…

2024年pmp考试还有多久啊?怎么备考?

一般来说每年3、6、9、12月考试&#xff0c;一年四次&#xff0c;具体时间以官网通知为准。报考时间提前2个月报名&#xff0c;2023年的最后一次考试时间是11月&#xff0c;已经截止报名了。所以下一次考试就得等到2024年3月了。 想知道怎么备考先来分析一下现在的“新”考纲&…