避坑指南☝️ | AntDesign+Vue3 走马灯的坑

需求

最近在使用vue3+tsx封装组件，想要在AntDesgin文件预览时使用走马灯并且增加图片缩放旋转的功能。
思路就是定义旋转角度和缩放比例数值，在对应img元素上动态绑定style。

问题

写好样式绑定后不生效，最开始以为是语法的问题，搞了一个多小时后发现是样式根本没有绑定到显示出来的dom元素上。因为要自带动画特效的原因，antd会自动多复制出一份dom结构。

如图，四个图生成了八个dom节点，并且在看代码时发现style绑定到了克隆出来的节点上。文档里没有关于这方面的说明。最后发现在将动画属性{effect}设置为fade就好了。

另外，在图片旋转后，点击下一张图片时，会出现图片会先是旋转状态再进行归位（已经在切换到下一张的方法中重置图片状态）的效果，可以将{speed}属性设置为0，该效果会消失。

点击缩略图展示对应文件

思路：点击对应缩略图，获取到index，展示对应的文件。使用的是goTo方法，但是在文档中也没有详细说明使用方法。

setup(){
    let slider: any;
    const goTo = (e) => {
      let targetIndex = e.target.attributes.tabindex.nodeValue;
      slider && slider.innerSlider.slickGoTo(targetIndex);
    };
    // 在走马灯上绑定
    <Carousel
    ref={(el) => (slider = el)}
    >
    ...
    </Carousel>
    // 对应缩略图
    <img tabindex={index}  onClick={goTo}>
}