SwipeRow 滑动单元格

可以左右滑动来展示操作按钮的单元格组件。

导入

import SwipeRow from '@/components/feedback/SwipeRow.vue';

使用方法

基础用法

可以通过 leftActions 和 rightActions 属性快速配置左右滑动操作按钮，也可以通过插槽自定义内容。

<template>
  <SwipeRow
    :leftActions="[{ text: '收藏', type: 'primary', onClick: () => toast?.info('点击了收藏') }]"
    :rightActions="[{ text: '标为已读', type: 'primary', onClick: () => toast?.info('点击了标为已读') }, { text: '删除', type: 'danger', onClick: () => toast?.info('点击了删除') }]"
  >
    <Cell title="单元格" value="内容" />
  </SwipeRow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SwipeRow from '@/components/feedback/SwipeRow.vue';
import Cell from '@/components/basic/Cell.vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';

const toast = ref<ToastInstance>();
</script>

自定义内容

通过插槽可以完全自定义左右滑动的内容，同时可以设置 leftWidth 和 rightWidth 来指定滑动区域的宽度。

<template>
  <SwipeRow
    :leftWidth="100"
    :rightWidth="140"
  >
    <template #left>
      <Text>内容内容内容内容内容内容</Text>
    </template>
    <FlexRow :gap="20" backgroundColor="white" :padding="20" :height="70">
      <Image src="https://imengyu.top/assets/images/test/1.jpg" :width="60" :height="60" />
      <Text>我是自定义渲染内容</Text>
    </FlexRow>
    <template #right>
      <Text>内容内容内容内容内容</Text>
      <Button shape="square" type="primary" text="确定" @click="toast?.info('点击了确定')" />
    </template>
  </SwipeRow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SwipeRow from '@/components/feedback/SwipeRow.vue';
import Text from '@/components/basic/Text.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Image from '@/components/basic/Image.vue';
import Button from '@/components/basic/Button.vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';

const toast = ref<ToastInstance>();
</script>

API 参考

SwipeRowAction 类型

操作按钮的类型定义：

名称	说明	类型	必填	默认值
text	操作按钮的文本	string	是	-
type	操作按钮的类型	ButtonType	是	-
onClick	操作按钮的点击事件	(e: any) => void	否	-

Props

名称	说明	类型	必填	默认值
leftWidth	手动设置左侧宽度，单位为px	number	-	0
leftActions	左侧操作按钮	SwipeRowAction[]	-	[]
rightWidth	手动设置右侧宽度，单位为px	number	-	0
rightActions	右侧操作按钮	SwipeRowAction[]	-	[]
disabled	是否禁用	boolean	-	false
autoClose	是否点击后自动关闭	boolean	-	true

Slots

名称	说明
default	默认内容区域，用于显示主要内容
left	左侧滑动内容，显示在默认内容左侧
right	右侧滑动内容，显示在默认内容右侧

Events

名称	说明	参数
click	点击内容区域时触发	$event