Element UI：富文本编辑器 Wangeditor 层级过高，覆盖时间选择器组件

前端

2024-01-12 16:28:11

在 Element UI 中解决 Wangeditor 覆盖时间选择器问题

问题

当将富文本编辑器 Wangeditor 与时间选择器组件一起使用时，可能会出现 Wangeditor 层级过高而覆盖时间选择器组件的问题。这将导致时间选择器组件无法正常使用，给用户带来不便。

原因分析：

Wangeditor 的默认层级很高，而时间选择器组件的层级较低。当两者重叠时，Wangeditor 会覆盖时间选择器组件，导致后者无法正常显示和操作。

解决方法：

有两种方法可以降低 Wangeditor 的层级：

1. 修改 Wangeditor 的 CSS 样式：

在 Wangeditor 的 CSS 样式中，找到 z-index 属性，将其值改为一个较小的数字，例如 100。这样，Wangeditor 的层级就会降低。

代码示例：

.wangeditor-container {
  z-index: 100;
}

2. 使用 Element UI 的 zIndex 属性：

在 Element UI 的组件中，我们可以使用 zIndex 属性来控制组件的层级。对于时间选择器组件，我们可以设置其 zIndex 属性为一个较大的数字，例如 999。这样，时间选择器组件的层级就会高于 Wangeditor 的层级。

代码示例：

import { DatePicker } from 'element-ui';

export default {
  components: { DatePicker },
  data() {
    return {
      zIndex: 999
    };
  },
  render() {
    return (
      <div>
        <DatePicker v-bind="$attrs" :style="{ zIndex: this.zIndex }" />
        <Wangeditor />
      </div>
    );
  }
};