css - CSS：如何在下拉菜单或选择中显示颜色选择器？

Question

我正在使用 Vue.js（我认为这与这个问题没有任何关系）和一个颜色选择器包vue-color。我想要达到的目标如下：

按钮或矩形元素在单击时具有颜色作为选定颜色显示带有颜色选择器的菜单类型下拉菜单。用户可以在这里选择颜色，当他们点击外部颜色选择器时，它会崩溃。我尝试使用引导程序执行此操作，dropdown并且一切正常，除非我单击以选择颜色菜单折叠（请参阅以下代码）：

<ul>
  <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
      <li><a href="#"><sketch-picker v-model="colors" /></a></li>
    </ul>
  </li>
</ul>

上面的代码显示了这个输出，这与我想要实现的相同，但在第一次点击时它只会崩溃，因此用户无法调整它。

在探索我发现下面的链接，但我无法将其翻译成 vue.js https://github.com/react-bootstrap/react-bootstrap/issues/1490

我也尝试使用select并将颜色选择器放入其中option，但是没有颜色选择器出现，只显示 r、g、b 值。

我还尝试使用 vue 制作自己的 div 和显示和隐藏。但是，即使有z-index（我知道这是可行的，但我无法使其正常工作），它也没有通过基本 div 占用它自己的空间。任何帮助，将不胜感激

标签： csstwitter-bootstrapvue.js