拾色器组件在Vuetify模式中不起作用

Question

在使用Vuetify的Vuejs应用程序中，我有一行包含一个复选框，文本字段和自定义颜色选择器元素（有关更多详细信息，请参见this SO question/answer）。我试图在两个地方使用完全相同的表单设置：整页和v-dialog模态。我遇到的问题是，从颜色选择器中选择的值在整个页面中都写回到了文本字段（通过事件），但是在模态内部调用时它不起作用。

为演示该问题，以下是模式实现的video和here is a CodeSandbox。供参考，这里是ColorPickerButton组件。

<template>
    <div ref="colorpicker" class="color-picker-outer" v-if="showPickerContainer">
      <span class="color-picker-inner"
        v-bind:style="{ 'background-color': colorValue }"
        @click="togglePicker"></span>
      <chrome-picker :value="colors" @input="updateFromPicker" v-if="displayPicker" />
    </div>
</template>

<script>
import { Chrome } from 'vue-color';

export default {
  props: {
    fieldName: String,
    initColor: String,
    showPickerContainer: true,
  },
  components: {
    'chrome-picker': Chrome,
  },
  data() {
    return {
      colors: {
        hex: '#4A4A4A',
      },
      colorValue: this.initColor,
      displayPicker: false,
    };
  },
  methods: {
    setColor(color) {
      this.updateColors(color);
      this.colorValue = color;
    },
    updateColors(color) {
      if (color.slice(0, 1) === '#') {
        this.colors = {
          hex: color,
        };
      } else if (color.slice(0, 4) === 'rgba') {
        let rgba = color.replace(/^rgba?\(|\s+|\)$/g, '').split(','),
          hex = `#${((1 << 24) + (parseInt(rgba[0]) << 16) + (parseInt(rgba[1]) << 8) + parseInt(rgba[2])).toString(16).slice(1)}`;
        this.colors = {
          hex,
          a: rgba[3],
        };
      }
    },
    showPicker() {
      document.addEventListener('click', this.documentClick);
      this.displayPicker = true;
    },
    hidePicker() {
      document.removeEventListener('click', this.documentClick);
      this.displayPicker = false;
    },
    togglePicker() {
      this.displayPicker ? this.hidePicker() : this.showPicker();
    },
    updateFromInput() {
      this.updateColors(this.colorValue);
    },
    updateFromPicker(color) {
      this.colors = color;
      if (color.rgba.a === 1) {
        this.colorValue = color.hex;
      } else {
        this.colorValue = `rgba(${color.rgba.r}, ${color.rgba.g}, ${color.rgba.b}, ${color.rgba.a})`;
      }
    },
    documentClick(e) {
      let el = this.$refs.colorpicker;
      let target = e.target;
        if (el && target) {
        if (el !== target && !el.contains(target)) {
          this.hidePicker();
        }
        this.$emit('update-color', this.colorValue, this.fieldName);
      }
    },
  },
  watch: {
    initColor(newVal, oldVal) {
      this.colorValue = newVal;
    },
  },
};
</script>

<style scoped>
  div.color-picker-outer {
    width: 30px;
    height: 30px;
    display: inline-block;
    background-color: #EEE;
    position: relative;
    top: 19px;
    outline: 3px solid #C9C9C9;
  }

  .color-picker-inner {
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
  }

  .vc-chrome {
    position: absolute;
    top: -3px;
  /*left: 55px; */
  /*bottom: 20px; */
    right: 33px;
    z-index: 9;
  }
</style>

我看到模态中的CPB组件正在进行（或不进行）两件事：

1）选择颜色时未调用updateFromPicker方法，因此不会发出update-color事件，因此颜色值不会写回到文本字段。

2）不能单击颜色选择器之外的任何位置以在模式中（即使在模式边界内）将其关闭；您必须单击颜色选择器正方形以将其关闭。

我一直对此感到头疼，所以如果有人能对此有所了解，我将不胜感激。