Avue框架中avue-ueditor富文本编辑器连续使用下拉框被覆盖问题解决记录

#问题描述#

在连续使用avue-ueditor富文本的时候发生了层级覆盖问题

如图：

其本质原因是菜单栏层级太高导致，简单粗暴的方法就是直接一个一个去修改z-index的层级，但是这边我的项目需要动态减少编辑器（有最大值），所以可以直接用sass的函数解决这个问题：

<div v-for="(item,i) in danxuanData.radiooptions" :key="i" class="xuanxiang">
  <el-radio v-model="danxuanData.answer" :label="label(i)"></el-radio>
  <avue-ueditor :class="'xuanxiang'+i">
  </avue-ueditor>
</div>

这边给每个avue-ueditor加上动态类名

css部分：

<style lang='scss' scoped>
// 定义一个变量
$grid-prefix: xuanxiang !default;

// 用sass的for循环修改w-e-toolbar的z-index层级
  @for $i from 0 to 7 {
    .#{$grid-prefix}#{$i} {
      /deep/.w-e-toolbar {
        z-index: (9-$i) * 100 !important;
        .w-e-droplist {
          height: 200px;
          overflow: scroll;
        }
      }
    }
  }
<style>

完美解决：

方法二：

更加简单粗暴

methods: {
//调整富文本编辑框层级
    getEditorHeight() {
      let aaa = document.getElementsByClassName('w-e-toolbar');
      let num = 10000;
      for (let i = 0; i < aaa.length; i++) {
        if (i == 0) {
          aaa[i].style.zIndex = String(num);
        } else {
          aaa[i].style.zIndex = String(num - i * 10);
        }
      }
    },
}

麻烦的是在每次富文本框增加或者减少的时候都需要$nextTick调这个方法