滑动单元格 SwipeCell

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

使用

API

安装使用

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

用法示例

基本使用

<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-design/mobile-vue';
</script>

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

自定义左右宽度

<template>
  <TiSwipeCell :left-width="200">
    <div slot="left" class="left">left</div>
    <div class="center">center</div>
  </TiSwipeCell>
  
  <TiSwipeCell :right-width="200">
    <div class="center">center</div>
    <div slot="right" class="right">right</div>
  </TiSwipeCell>
</template>

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

<style>
  .left,
  .right {
    height: 100px;
  }

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

禁用滑动

<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-design/mobile-vue';
</script>

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

异步操作控制

<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, TiButton } from '@titian-design/mobile-vue';

const visible = ref<boolean>(false)

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

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

监听事件

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

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

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

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

const handleTiClick = (e: CustomEvent<left | right | outside | cell>) => {
  console.log("点击事件触发了", e);
};
</script>

<style>
  .left {
    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	根节点可扩展的类名	-