SwipeCell

A cell component that can slide left and right to display action buttons.

Basic usage

Just wrap the content inside the Sticky component.

<press-swipe-cell
   :right-width="65"
   :left-width="65"
   @click="onClick"
   @close="onClose"
   @open="onOpen"
>
   <div slot="left">
     choose
   </div>
   <div class="content">
     some content
   </div>
   <div slot="right">
     delete
   </div>
</press-swipe-cell>

export default {
   methods: {
     onClick(...args) {
       console.log('onClick.args', args);
     },
     onClose(...args) {
       console.log('onClose.args', args);
     },
     onOpen(...args) {
       console.log('onOpen.args', args);
     },
   },
};

API

Props

Parameter	Description	Type	Default
name	Identifier, which can be obtained from the parameters of the close event	string | number	-
left-width	left sliding area width	number	0
right-width	The width of the right sliding area	number	0
async-close	Whether to close asynchronously	boolean	false
disabled v1.3.4	Whether to disable sliding	boolean	false

Slot

Name	Description
-	Customize display content
left	Left sliding content
right	Swipe content to the right

Events

Event Name	Description	Parameters
click	Triggered on click	Click position on close (left right cell outside)
close	trigger when close	{ position: 'left' | 'right' , instance , name: string }
open	fires when open	{ position: 'left' | 'right' , name: string }

close parameter

parameter	type	description
position	string	Click position when closing (left right cell outside)
instance	object	SwipeCell instance
name	identifier	string

method

You can get the SwipeCell instance and call the instance method through selectComponent

method name	parameters	return value	description
open	position: left \| right	-	open cell sidebar
close	-	-	Collapse cell sidebar