引入组件

局部引入

// parent.vue
const FSwipeAction = defineAsyncComponent(() => import('@/components/formaui/f-swipe-action/f-swipe-action.vue'))

基础用法

items属性：右侧操作按钮列表，左滑展开

<f-swipe-action :items="items" @action-click="onActionClick">
  <f-cell>左滑显示操作按钮</f-cell>
</f-swipe-action>

import { ref } from 'vue'

const items = ref([
  { label: '收藏', value: 'favorite', bgColor: '#C8C7CD', color: '#FFFFFF', width: '160rpx' },
  { label: '删除', value: 'delete', bgColor: 'var(--f-color-danger)', color: '#FFFFFF', width: '160rpx' }
])

const onActionClick = (detail: { index: number; value: string | number }) => {
  uni.showToast({ title: String(detail.value), icon: 'none' })
}

closeOnAction属性：点击按钮后是否自动关闭（默认true）

<f-swipe-action :items="items" :close-on-action="false" @action-click="onActionClick">
  <f-cell>点击按钮后需点遮罩关闭</f-cell>
</f-swipe-action>

isMask属性：展开时是否显示遮罩（默认true）

<f-swipe-action :items="items" :is-mask="false" @action-click="onActionClick">
  <f-cell>展开时可滑动其他项</f-cell>
</f-swipe-action>

disabled属性：是否禁止滑动（默认false）

<f-swipe-action :items="items" disabled @action-click="onActionClick">
  <f-cell>无法左滑</f-cell>
</f-swipe-action>

v-model:open：手动控制展开/收起

<f-swipe-action v-model:open="manualOpen" :items="items" @action-click="onActionClick">
  <f-cell>可通过按钮控制展开</f-cell>
</f-swipe-action>
<f-button @click="manualOpen = !manualOpen">{{ manualOpen ? '收起' : '展开' }}</f-button>

插槽

名称	说明
default	滑动主体内容
actions	自定义操作按钮区

使用 actions 插槽时，可通过 operateWidth 设置操作区宽度。

<f-swipe-action operate-width="200rpx">
  <f-cell>自定义按钮区域</f-cell>
  <template #actions>
    <view class="flex-1 flex items-center justify-center bg-[var(--f-color-danger)] text-white">删除</view>
  </template>
</f-swipe-action>

属性

名称	类型	说明	默认值
items	{label:string; value:string/number; color?:string; fontSize?:string; width?:string; bgColor?:string; icon?:string; iconWidth?:string; iconHeight?:string}[]	右侧操作按钮列表	[]
closeOnAction	boolean	点击按钮后是否自动关闭	true
isMask	boolean	展开时是否显示遮罩，点击遮罩关闭	true
operateWidth	string	使用 actions 插槽时的操作宽度	160rpx
disabled	boolean	是否禁止滑动	false
bgColor	string	内容区背景颜色	#FFFFFF
v-model:open	boolean	是否展开操作区	false

事件

事件名	说明	回调参数
actionClick	点击操作按钮	{ index: number; value: string | number }

方法

方法名	说明	传入参数
close	关闭操作菜单	-