滑动单元格 SwipeCell

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

使用

API

安装使用

import { TiSwipeCell } from '@titian-design/mobile-vue';

用法示例

基本使用

codesanbox

copy

code

<template>
  <TiSwipeCell>
    <div slot="left" class="left">left</div>
    <div class="center">center</div>
    <div slot="right" class="right">right</div>
  </TiSwipeCell>
</template>

<script lang="ts" setup>
import { TiSwipeCell } from 'titian-h5-vue';
</script>

<style>
.left,
.right {
  height: 100px;
  width: 100px;
}
.center {
  height: 100px;
  width: 100%;
}
</style>

禁用滑动

codesanbox

copy

code

<template>
  <TiSwipeCell disabled>
    <div slot="left" class="left">left</div>
    <div class="center">center</div>
    <div slot="right" class="right">right</div>
  </TiSwipeCell>
</template>

<script lang="ts" setup>
import { TiSwipeCell } from 'titian-h5-vue';
</script>

<style>
.left,
.right {
  height: 100px;
  width: 100px;
}
.center {
  height: 100px;
  width: 100%;
}
</style>

事件监听

codesanbox

copy

code

<template>
  <TiSwipeCell @open="handleOpen" @close="handleClose" @ti-click="handleTiClick">
    <div slot="left" class="left">left</div>
    <div class="center">center</div>
    <div slot="right" class="right">right</div>
  </TiSwipeCell>
</template>

<script lang="ts" setup>
import { TiSwipeCell } from 'titian-h5-vue';

const handleOpen = (e: CustomEvent) => {
  console.log('打开', e);
};

const handleClose = (e: CustomEvent) => {
  console.log('关闭', e);
};

const handleTiClick = (e: CustomEvent) => {
  console.log('点击事件触发了', e);
};
</script>

<style>
.left,
.right {
  height: 100px;
  width: 100px;
}
.center {
  height: 100px;
  width: 100%;
}
</style>

自定义宽度

codesanbox

copy

code

<template>
  <TiSwipeCell :leftWidth="200">
    <div slot="left">left</div>
    <div>center</div>
  </TiSwipeCell>

  <TiSwipeCell :rightWidth="200">
    <div>center</div>
    <div slot="right">right</div>
  </TiSwipeCell>
</template>

<script lang="ts" setup>
import { TiSwipeCell } from 'titian-h5-vue';
</script>

异步操作控制

codesanbox

copy

code

<template>
  <TiButton @click="handleClick">控制</TiButton>
  <TiSwipeCell :visible="visible">
    <div slot="left" class="left">left</div>
    <div class="center">center</div>
  </TiSwipeCell>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiSwipeCell } from 'titian-h5-vue';

const visible = ref<boolean>(false);

const handleClick = () => {
  visible.value = !visible.value;
};
</script>

<style>
.left,
.right {
  height: 100px;
  width: 100px;
}
.center {
  height: 100px;
  width: 100%;
}
</style>

TiSwipeCell API

属性 Properties

名称	类型	必填	默认值	说明	备注
left-width	number	否	0	左边滑动区域宽度	-
right-width	number	否	0	右边滑动区域宽度	-
visible	boolean	否	false	设置可滑动区域划开	会先从左边到右开始查找是否有内容用于展示
disabled	boolean	否	false	禁止滑动	-
async-close	boolean	否	false	是否异步关闭	-
name	string	否	-	唯一标识	-

事件 Events

事件名	参数	说明	备注
open	(e: CustomEvent<OpenParams>) => void	打开时触发	-
close	(e: CustomEvent<CloseParams>) => void	关闭时触发	-
ti-click	(e: CustomEvent<left | right | outside | cell >) => void	点击时触发	关闭时的点击位置 (left right cell outside)

OpenParams

interface OpenParams {
  position: Position;
  name: string;
}

CloseParams

interface CloseParams {
  position: ClickPosition;
  name: string;
  instance: TiSwipeCell;
}

插槽 Slots

名称	说明	备注
right	右侧内容	-
left	左侧内容	-

可扩展样式名 External Class

名称	说明	备注
ext-class	根节点可扩展的类名	-