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也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

.hidden{
   visibility:hidden 
   }
visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

vue中通过指令使元素显示和隐藏的方式：

v-if：直接删除元素

v-show：改变元素的display属性

由于display：none是在动画解析完成之后才执行的，因此动画对使用v-show的元素不生效。考虑自定义指令来实现带动画的元素显示和隐藏。

自定义指令实现collapse

  collapse: (el: HTMLElement, binding: any) => {
    el.style.transition = "max-height 0.3s ease" // 设置动画效果
    if (binding.value) { // 通过binding的值表示显示和隐藏
      el.style.maxHeight = "1000px" // 显示
    } else { // 隐藏
      el.style.maxHeight = "0px"
      el.style.overflow = "hidden"
    }
  }

这里使用maxHeight是因为动画多height：auto不生效，使用maxHeight代替

使用：

<progress-detail
          :id="1"
          v-collapse="detailShowId == index"
          label="进展详情:"
          center
        ></progress-detail>