前言:
本人公司所用的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>
结语:如果有什么不对的地方请指正