Rainui

Appearance

r-swipe-cell ​

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

示例 ​

vue
<template>
  <view class="content" style="padding: 0; background-color: transparent">
    <r-config-provider>
      <view style="padding: 5px 0"></view>
      <r-divider content-position="left">基本使用</r-divider>
      <r-swipe-cell>
        <template #left>
          <r-button type="primary">选择</r-button>
        </template>
        <template #right>
          <r-button type="danger">删除</r-button>
        </template>

        <r-cell is-link title="基本使用" />
      </r-swipe-cell>

      <r-divider content-position="left">禁用</r-divider>
      <r-swipe-cell disabled>
        <template #left>
          <r-button type="primary">选择</r-button>
        </template>
        <template #right>
          <r-button type="danger">删除</r-button>
        </template>

        <r-cell is-link title="基本使用" />
      </r-swipe-cell>

      <r-divider content-position="left">点击后手动关闭</r-divider>
      <r-swipe-cell :autoClosed="false" ref="swipeCellRef" @click="onClick">
        <template #left>
          <r-button type="primary">选择</r-button>
        </template>
        <template #right>
          <r-button type="danger">删除</r-button>
        </template>

        <r-cell is-link title="基本使用" />
      </r-swipe-cell>
    </r-config-provider>
  </view>
</template>
<script setup>
import { ref } from "vue";
const swipeCellRef = ref(null);
const onClick = (position) => {
  console.log("position", position);
  if (["left", "right"].includes(position)) swipeCellRef.value.close();
};
</script>

API ​

Props ​

名称说明类型默认值可选值
name标识符，通常为一个唯一的字符串或数字，可以在事件参数中获取到Number | String--
disabled是否禁用滑动Booleanfalsetrue
autoClosed点击后是否自动关闭Booleantruefalse

Events ​

名称说明回调参数
click点击时触发position
open打开时触发{name,position}
close关闭时触发{name,position}

Slots ​

名称说明
default默认显示的内容
left左侧滑动区域的内容
right右侧滑动区域的内容

Methods ​

方法名说明参数返回值
open打开单元格侧边栏position // (left, right)-
close收起单元格侧边栏--

更多组件，请前往rainui