需求:
点击点击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>