vue3自定义指令实现Collapse

元素隐藏的方式有以下几种

1、overflow:hidden

防止溢出，也是一种隐藏，只不过是把超出范围的元素隐藏，这种一般用于文字过多或者图片特效以及自适应中div没法设置高度时使用

2.display:none

设置元素的display为none是最常用的隐藏元素的方法。

.hide {
     display:none;
 }

这就是完全的隐藏了，直接消失，任何对该元素直接的用户交互操作都不可能生效，被隐藏的元素完全不会占用空间，仿佛元素完全不存在一样。

3、opacity:0

opacity属性表示元素的透明度，而将元素的透明度设置为0后，元素也是隐藏的。

 .transparent {
     opacity:0;
}
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，设置透明度为0后，元素只是隐身了，它依旧存在页面中，它也同样影响用户交互。在读屏软件中会被识别。

4、position：
元素的定位

.box{
    position：absolutely；
    top：-4555px；
    left：-45545px
}

top和left设置成足够大的负数，相当于把元素放到可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。

5，visibility:hidden

设置元素的visibility为hidden也是一种常用的隐