t-swipe-action

SwipeAction 滑动操作

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <t-swipe-action v-model="isOpen" @change="onChange">
    <!-- 内容区域 -->
    <view class="content">
      <text>列表项内容</text>
    </view>
    
    <!-- 操作按钮 -->
    <template #buttons>
      <view class="btn-edit" @click="onEdit">编辑</view>
      <view class="btn-delete" @click="onDelete">删除</view>
    </template>
  </t-swipe-action>
</template>

<script setup>
const isOpen = ref(false)

function onChange(state: boolean) {
  console.log('展开状态：', state)
}

function onEdit() {
  console.log('点击编辑')
}

function onDelete() {
  console.log('点击删除')
}
</script>

Props

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

Events

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

Slots

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