# t-swipe-action

SwipeAction 滑动操作

t-swipe-action 组件介绍

t-swipe-action 是滑动操作组件，用于左右滑出操作按钮，常用于列表项的删除、编辑等操作。

t-swipe-action 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-swipe-action 基础用法

基础用法参考 demo/swipe-action/swipe-action.uvue，通过插槽配置内容和操作按钮。

<template>
	<t-page class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class='mb-15'
				title="SwiperAction 左滑操作栏"
				sub-title="向右滑动来显示隐藏的操作按钮,向左滑动关闭选项">
		</t-card>
		<t-section title="基础功能"
				   class="mb-15"></t-section>
		<t-swipe-action @change="onchange"
						class="mb-15">
			<view class="r-10 oh">
				<t-cell icon='/static/grid/grid (8).png'
						icon-class="s-22"
						title="王者荣耀/51分钟前" />
				<view :class="[`tvg`]">
					<t-text class="sfwb s-15">【十连必得皮肤】快来抽取好运</t-text>
					<t-text class="slh-42"
							:lines="1">【玉镖夺魁】活动火热进行中！参与活动投掷十次</t-text>
				</view :class="[`tvg`]">
			</view>
			<template v-slot:buttons>
				<t-row class="h-100% w-175 fc">
					<t-icon :hover="true"
							name="setting"
							type='primary'
							class="s-40! mr-30"></t-icon>
					<t-icon :hover="true"
							name="trash"
							type='error'
							class="s-40!"></t-icon>
				</t-row>
			</template>
		</t-swipe-action>
		<t-section title="默认展开"
				   class="mb-15"></t-section>
		<t-swipe-action :state='true'
						class="mb-15 r-10">
			<t-cell icon='/static/grid/grid (4).png'
					title="中国建设银行/23分钟前" />
			<view :class="[`plr-10 tvg`]">
				<t-text class="sfwb s-15">做任务得5元立减现金！</t-text>
				<t-text class="slh-42"
						:lines="1">就医不带卡，只需要医保码。开通医保电子凭证可领</t-text>
			</view>
			<template v-slot:buttons>
				<t-row class="h-100%">
					<t-button class="h-100%! r-0! w-75"
							  type="primary">编辑</t-button>
					<t-button class="h-100%! r-0! w-75"
							  type='error'>删除</t-button>
				</t-row>
			</template>
		</t-swipe-action>
	</t-page>
</template>
<script setup>
	function onchange(e : boolean) {
		console.log(e)
	}
</script>

t-swipe-action Props

属性名	说明	类型	默认值
state	操作项的值，控制操作栏是否展开	boolean	false
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	''
size	组件尺寸	string	''

t-swipe-action Events

事件名	说明	回调参数
change	当操作栏展开或收起时触发	state: boolean

t-swipe-action Slots

插槽名	说明
default	默认插槽，放置列表项内容
buttons	操作按钮插槽，放置操作按钮