SwipeRow 滑动单元格

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

导入

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

使用方法

基础用法

<template>
  <SwipeRow
    :leftWidth="55"
    :rightWidth="120"
  >
    <template #left>
      <Button shape="square" type="primary" text="选择" @click="toast1?.info('点击了选择')" />
    </template>
    <Cell title="单元格" value="内容" />
    <template #right>
      <Button shape="square" type="danger" text="删除" @click="toast1?.info('点击了删除')" />
      <Button shape="square" type="primary" text="收藏" @click="toast1?.info('点击了收藏')" />
    </template>
  </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 Button from '@/components/basic/Button.vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';

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

自定义内容

<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="toast1?.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 toast1 = ref<ToastInstance>();
</script>

API 参考

Props

名称	说明	类型	必填	默认值
leftWidth	左侧内容宽度	number	-	0
rightWidth	右侧内容宽度	number	-	0
disabled	是否禁用	boolean	-	false
autoClose	是否点击后自动关闭	boolean	-	true

Slots

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

Events

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