实现Taro小程序+nut-ui左滑删除效果

Taro小程序开发中，使用nut-ui组件，实现左滑删除卡片效果（自定义删除按钮样式）

html代码部分

<nut-swipe class="carBox" v-for="(item, index) in carList" :key="item" :ref="(el) => setSwipeRef(el, index)"
 @open="() => handleSwipeOpen(index)" @close="handleSwipeClose">
      <view>
           自定义卡片内容区域
       </view>
       <template #right>
           <nut-button shape="square" class="delBtn" color="#137DF5" @click="handleSwipeDelete(item, index)"><slot>删除</slot></nut-button>
       </template>
   </nut-swipe>


.carBox {
    width: calc(100% - 40px);
    border-radius: 18px;
    background-color: #fff;
    margin: 24px 41px;
}
.delBtn {
    width: 160px;
    height: 100%;
    font-size: 36px;
    color: #FFFFFF;
    line-height: 52px;
    border-radius: 0px 18px 18px 0px;
}

ts部分

// 使用Map存储引用
const swipeRefs = ref(new Map<number, any>())
const swipingIndex = ref<number | null>(null)

const handleSwipeOpen = (index: number) => {
  swipingIndex.value = index
}

const handleSwipeClose = () => {
  swipingIndex.value = null
}

const setSwipeRef = (el: any, index: number) => {
  if (el) {
    swipeRefs.value.set(index, el)
  } else {
    swipeRefs.value.delete(index)
  }
}

const handleSwipeDelete = async (item, index) => {
  const swipeInstance = swipeRefs.value.get(index)
  swipeInstance?.close()
  await handleDeleteClick(item) // 删除操作-> 调用删除接口（函数自定义）
  // 关闭所有左滑面板
  swipeRefs.value.forEach(swipe => {
    swipe?.close()
 })
}

end~