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

2023-12-23 17:44

本文主要是介绍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()
})

这篇关于vue微乾坤子应用开发及ele组件开发时问题记录的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/528862

相关文章

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

基于Python开发一个图像水印批量添加工具

《基于Python开发一个图像水印批量添加工具》在当今数字化内容爆炸式增长的时代,图像版权保护已成为创作者和企业的核心需求,本方案将详细介绍一个基于PythonPIL库的工业级图像水印解决方案,有需要... 目录一、系统架构设计1.1 整体处理流程1.2 类结构设计(扩展版本)二、核心算法深入解析2.1 自

Zabbix在MySQL性能监控方面的运用及最佳实践记录

《Zabbix在MySQL性能监控方面的运用及最佳实践记录》Zabbix通过自定义脚本和内置模板监控MySQL核心指标(连接、查询、资源、复制),支持自动发现多实例及告警通知,结合可视化仪表盘,可有效... 目录一、核心监控指标及配置1. 关键监控指标示例2. 配置方法二、自动发现与多实例管理1. 实践步骤

Kotlin Map映射转换问题小结

《KotlinMap映射转换问题小结》文章介绍了Kotlin集合转换的多种方法,包括map(一对一转换)、mapIndexed(带索引)、mapNotNull(过滤null)、mapKeys/map... 目录Kotlin 集合转换:map、mapIndexed、mapNotNull、mapKeys、map

nginx中端口无权限的问题解决

《nginx中端口无权限的问题解决》当Nginx日志报错bind()to80failed(13:Permissiondenied)时,这通常是由于权限不足导致Nginx无法绑定到80端口,下面就来... 目录一、问题原因分析二、解决方案1. 以 root 权限运行 Nginx(不推荐)2. 为 Nginx

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

Redis中Stream详解及应用小结

《Redis中Stream详解及应用小结》RedisStreams是Redis5.0引入的新功能,提供了一种类似于传统消息队列的机制,但具有更高的灵活性和可扩展性,本文给大家介绍Redis中Strea... 目录1. Redis Stream 概述2. Redis Stream 的基本操作2.1. XADD

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red

nginx 负载均衡配置及如何解决重复登录问题

《nginx负载均衡配置及如何解决重复登录问题》文章详解Nginx源码安装与Docker部署,介绍四层/七层代理区别及负载均衡策略,通过ip_hash解决重复登录问题,对nginx负载均衡配置及如何... 目录一:源码安装:1.配置编译参数2.编译3.编译安装 二,四层代理和七层代理区别1.二者混合使用举例