element-ui的el-color-picker颜色选择器组件，弹窗定位在左上角的问题排查和解决

那你能帮帮我吗2024-12-20 17:58

1.问题复现场景

拿官网实例截个图说明一下

由于需要替换第三方插件的颜色选择器，所以打算用element-ui直接替换，故在第三方插件初始化颜色选择器的类中返回element-ui的color-picker组件

typescript 复制代码

import { ColorPicker } from 'element-ui';

class ColorController {
    constructor(parent, object, property, rgbScale) {
        const Picker = Vue.extend(ColorPicker)
        const instance = new Picker({
            propsData: {
                value: object[property],
                showAlpha: true
            }
        })

        instance.$on('change', (v) => {
            console.log('color-change', v)
            this._setValueFromHexString(v);
        })
        let div = document.createElement('div')
        this.$widget.appendChild(div) // this.$widget为第三方插件生成颜色选择器的dom节点
        instance.$mount(div)
    }
  ... // 省略第三方插件其他源代码
}

2.问题根源

1.el-color-picker颜色选择器弹窗基于父级组件dom动态计算所在位置，显示定位； 2.由于第三方插件ColorController类构造函数内生成el-color-picker组件实例所挂载的dom节点被替换，导致获取到this.$parent.$el为空，在渲染颜色选择器弹窗时，无法得到有效的位置，所以弹窗只能显示在页面左上角

3.解决方案

1.自定义一个颜色选择器组件，导入el-color-picker组件进行包装套壳，确保颜色选择器弹窗能获取正确的父级节点

xml 复制代码

// 自定义颜色选择器组件 color-picker
<template>
  <div class="color-picker">
    <ColorPicker v-model="color" :showAlpha="showAlpha"></ColorPicker>
  </div>
</template>

<script>
import { ColorPicker } from 'element-ui';
export default {
  name: 'color-picker',
  props: {
    value: {
      type: String,
      default: '#ffffff',
    },
    showAlpha: {
      type: Boolean,
      default: true
    }
  },
  components: {
    ColorPicker,
  },
  data() {
    return {
    };
  },
  computed: {
    color: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);
      },
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.color-picker {
  background-color: transparent;
}
</style>

2.修改第三方组件库ColorController类

javascript 复制代码

import ColorPicker from './color-picker.vue'; // 引入包装过的自定义组件

class ColorController {
    ... // 其它代码保持不变
}