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

rain丶子厚2023-12-23 13:35

一. 微乾坤

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

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

javascript 复制代码 
// 转换微前端路由数据
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] || path
        let 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，从而绕过资源文件夹路径不对问题
javascript 复制代码 
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 %>
javascript 复制代码 
<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

javascript 复制代码 
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的宽度。

javascript 复制代码 
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样式一起控制 文字左右位置显示

javascript 复制代码 
<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() 方法

javascript 复制代码 
 this.$nextTick(() => {
     this.$refs.PickerInput.$refs.elPopover.updatePopper()
})
相关推荐
如若12314 分钟前
对文件内的文件名生成目录，方便查阅
java·前端·python
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语1 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1，因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport1 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg1 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww1 小时前
【es6复习笔记】rest参数（7）
前端·笔记·es6·参数·rest
m0_748254881 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭2 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234522 小时前
前端Vue3字体优化三部曲（webFont、font-spider、spa-font-spider-webpack-plugin）
前端·webpack·node.js
Web阿成2 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明0719个Web前端交互式3D JavaScript框架和库08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO