van-swipe-cell滑动单元格，设置多个按钮

项目实际开发中用到滑动单元格，设置两个按钮，官方案例没有写，记录一下
官方组件
效果图：

在index.json中引入组件

 "usingComponents": {
    "van-swipe-cell": "@vant/weapp/swipe-cell/index"
  }

wxml

<view class="historyList">
	<van-swipe-cell wx:for="{{billInfolist}}" wx:key="index" right-width="{{ 100 }}" async-close bind:close="closeSwipe">
    	<view class="radioCont">
        <view>发票抬头：测试抬头</view>
        	<view class="flex">
            	<view>发票类型：企业单位</view>
                <view>税号：SH12345</view>
            </view>
            <view class="flex">
            	<view>收件人：张三</view>
                <view>手机号：12345678901</view>
            </view>
        </view>
        <view slot="right" class="flex right">
        	//  id用来区分点击的是“删除”按钮还是“编辑”按钮
        	 <view class="item" id="删除" data-item="{{item}}" bindtap="del">删除</view>
            <view class="item" id="编辑" data-item="{{item}}" bindtap="del">编辑</view>
        </view>
    </van-swipe-cell>
</view>

js

data:{
	billInfolist:[{
            "id": 4,
            "receiver": "张三",
            "receiverMobile": '12345678901',
            "taxNo": "ZTTEST12345",
            "gmtCreate": "2022-09-15 16:00:21"
        },
        {
          "id": 5,
          "receiver": "张三",
          "receiverMobile": '12345678901',
          "taxNo": "ZTTEST12345",
          "gmtCreate": "2022-09-15 16:00:21",
      }],  // 假数据
	name:'',   // 判断是删除或是编辑
},
del(e){
    let name = e.currentTarget.id
    let obj = e.currentTarget.dataset.item
    console.log(name,':name',obj,':obj');
    this.setData({
    	name:name
    })
},
closeSwipe(e){
    console.log(e,'哈哈哈删除');
    const {  instance } = e.detail;
    if (this.data.name=='删除') {
    	// 点击“删除”时做的操作
        wx.showModal({
        	content:'确定要删除吗？',
        	success (res) {
        		if (res.confirm) {
            		console.log('用户点击确定')
            		instance.close();
          		} else if (res.cancel) {
            		console.log('用户点击取消')
            		instance.close();
          		}
        	}
     	})
    }else{
   		// 点击“编辑”时做的操作
      	wx.showModal({
        	content:'确定要编辑吗？',
        	success (res) {
          		if (res.confirm) {
            		console.log('用户点击确定')
            		instance.close();
          		} else if (res.cancel) {
            		console.log('用户点击取消')
            		instance.close();
          		}
        	}
      	})
    }
}

点击删除打印出的东西

wxss
组件直接引用，按钮样式不对，所以要自己写

.historyList {
  	border-bottom: 1rpx solid #e7e7e7;
}
.radioCont {
  	line-height: 50rpx;
  	color: #666;
  	font-size: 26rpx;
  	padding: 30rpx 20rpx;
}
.right{
  	height: inherit;
}
.right .item{
	background-color: #fbc86b;
	width: 50px;
	text-align: center;
  	font-size: 26rpx;
 	color: #fff;
  	height: inherit;
  	line-height: 210rpx;
}
.right .item:first-child{
	background-color: red;
}