vant移动端 怎么实现点击SwipeCell面板实现右滑

需求：

点击点击SwipeCell面板实现右滑

vant2文档，可以调用实例的open方法，传参，‘left’ 'right’。

发现传参后，根本没用效果还会报错。

查看官方ISSUS后，得到了解决办法。

 <template>
  <div>
    <van-sell-group>
    <van-swipe-cell ref="a">
  <template #left>
    <van-button square type="primary" text="选择" />
  </template>
<div>  <van-cell :border="false" :title="item" value="内容" @click="left" /></div>
  <template #right>
    <van-button square type="danger" text="删除" />
    <van-button square type="primary" text="收藏" />
  </template>
</van-swipe-cell>
</van-sell-group>
  </div>
</template>

<script>  
export default {  
 data(){
return{

}
 },
 methods:{
   left(event){
    event.stopPropagation();
    this.$refs['a'].open("right");
   }

 }
} 
</script> 

<style scoped>  
  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }
</style>

 传入事件对象，阻止事件冒泡，再配合open使用，就可以点击滑动。

swiperCell是在v-for中渲染的，这个时候，需要动态的设置ref, 通过点击的item来触发对于的swiperCell的open()方法。

<template>
  <div>
    <van-sell-group>
    <van-swipe-cell :ref="`a${index}`" v-for="(item, index) in 5" :key="index">
  <template #left>
    <van-button square type="primary" text="选择" />
  </template>
<div>  <van-cell :border="false" :title="item" value="内容" @click="right($event, index)" /></div>
  <template #right>
    <van-button square type="danger" text="删除" />
    <van-button square type="primary" text="收藏" />
  </template>
</van-swipe-cell>
</van-sell-group>
  </div>
</template>

<script>  
export default {  
 data(){
return{

}
 },
 methods:{
   right(event,index){
    event.stopPropagation();
    // if (this.$refs["cell"].offset) {
    //     this.$refs["cell"].close();
    //     return
    //   }
    this.$refs[`a${index}`][0].open("right");
   }

 }
} 
</script> 

<style scoped>  
  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }
</style>