前端日记

element-plus弹框或弹层过多导致遮罩层完全变黑

需要修改的范围

1. 显示的弹层
2. 且不为最外一层

// 弹层样式
body {
  // 防止弹层过多，导致遮罩层背景色变为不透明的黑色
  > .el-overlay {
    &:has(~ .el-overlay:not([style*='display: none'])) {
      transition: 1s background-color;
      background-color: rgba(0, 0, 0, 0.05);
    }
  }
}

处理多个框架使用element-plus的zIndex

<script>
import { useZIndex } from 'element-plus';
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'IndexHandler',
  setup() {
    const { nextZIndex, currentZIndex } = useZIndex();

    window.initPopupManagerIndex = () => {
      if (!window?.customIndex) {
        return;
      }

      Object.defineProperty(window, 'customIndex', {
        configurable: true,
        get() {
          return nextZIndex();
        },
        set(val) {
          while (val > currentZIndex.value) {
            nextZIndex();
          }
        }
      });
    };

    window.initPopupManagerIndex();
  }
});
</script>

火狐浏览器inconfont等字体图标不居中

1. 仅在火狐浏览器中生效
2. 对iconfont字体图标做适配

// 火狐浏览器样式兼容
@-moz-document url-prefix() {
  // 兼容火狐浏览器下字体图标未垂直居中
  .el-select-dropdown__item {
    .flex {
      & > .iconfont {
        &::before {
          vertical-align: middle;
        }
      }
    }
  }
}

组件触发两次keyup.enter事件

<template>
    <el-input v-bind="$attrs">
<template/>

<BaseInput @keyup.enter="handleEnter" />

BaseInput本身绑定了keyup.enter,然后通过$attrs将属性传递给el-input。导致el-input也绑定了keyup.enter

解决：v-bind需要排除keyup.enter事件的属性

vue-i18n 9.x不兼容@|${}等字符，需要插值处理

1. 将所有原有特殊字符全部使用插值写法: | => {'|'}、 @ => {'@'}
2. 使用正则替换处理原有字符

// 占位符
const placeholder = '👨‍👩‍👦‍👦====                         =====💖';

// 特殊字符
const specialCharacters = '@|${}';

// 将插值字符串(如{'xxasd}'}、{0}、{test}、 | ) 转化为占位符。并存储插值字符串
obj[key] = msg[key].replace(/(\{'.*?'\})|(\{[\S]+?\})|(\s\|\s)/g, matchStr => {
matchList.push(matchStr);
return placeholder;
});
// 将@ | $ 等特殊字符变成{'@'}、{'|'}等, 兼容vue-i18n 9+版本
obj[key] = obj[key].replace(new RegExp(`(?<!{')([${specialCharacters}]+)(?!'})`, 'g'), "{'$1'}");
// 再将占位符转化为插值字符串
obj[key] = obj[key]
.split(placeholder)
.map(i => `${i}${matchList.shift() || ''}`)
.join('');