vant组件手风琴 右侧图标 移到左侧并自动切换的方法

其中主要是

      <van-collapse-item :name="0" :icon="icon_up">
        <div class="right-icon" slot="right-icon">
          <img :src="activeName == 0 &&  activeName !== '' ? icon_up:icon_down" alt />
        </div>
        .......省略没写
      </van-collapse-item>

思路是icon 是设置左侧图标的，先设置左侧图标，然后给其隐藏，在style里有体现，我找到了他的class样式，然后隐藏起来了

  .van-cell__left-icon {
          display: flex;
          align-items: center;
          width: 0.32rem;
          height: 0.32rem;
          margin-right: 0.18rem;
          opacity: 0; //使左侧图标隐藏
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }

然后把右侧原本的图标自定义，添加我们像替换的图片

     <div class="right-icon" slot="right-icon">
         <img :src="activeName == 0 &&  activeName !== '' ? icon_up:icon_down" alt />
      </div>

通过activeName 来判断是否是展开状态，来对此显示不同的图片，
最后找到右侧图标的样式

 .right-icon {
          position: absolute;
          left: 0;
          width: 0.32rem;
          height: 0.32rem;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }

把他移动到左侧图标的位置，这样 就完成了我们想要的效果，我们看下效果图吧