vuetifyUI 使用VMenu组件实现控制div的显示与隐藏

前言：

        本人公司所用的ui组件库主要是vuetify，而在国内vuetify使用的生态好像不是特别好，这玩意又是国外写的，导致文档也看得迷迷糊糊的，所以特此记录一下。

场景：

        我们在项目中经常会涉及到一个div的显示与隐藏的操作（通过另一个div控制），那么我们的常规操作是什么呢，给div设置click事件（控制这个取色板的显示），再绑定一个@blur事件（失去焦点隐藏）,这样做当然没啥问题，但是如果我们用ui组件库来实现呢，是不是可以少一些事件和变量---------------以下就是一个div控制一个取色板的显示与隐藏。

v-menu 代码示例

   <!--外层的v-menu包裹控制的div，以及取色板菜单-->
    <v-menu :close-on-content-click="false">
      <!-- 这个template是指定哪个元素来当作激活器 -->
      <template #activator="{ props }">
        <!-- 给这个dom绑定这个props即可 -->
        <v-col v-bind="props" class="color-box" cols="auto">
          <div
          ></div>
        </v-col>
      </template>
      <!-- 这是你需要显示与隐藏的元素(取色板) -->
      <v-color-picker
        class="color-picker"
        dot-size="25"
       ></v-color-picker>
    </v-menu>

结语：如果有什么不对的地方请指正