Tantalum UI

Appearance

Return to top
On this page

SwipeCell 滑动单元格

vue
<template>
  <ta-group title="基础用法">
    <ta-swipe-cell :buttons="buttons">
      <ta-cell label="单元格" content="向左划"></ta-cell>
    </ta-swipe-cell>
  </ta-group>
  <ta-group title=" 事件监听">
    <ta-swipe-cell :buttons="buttons" @buttonClick="onButtonClick">
      <ta-cell label="单元格" content="向左划"></ta-cell>
    </ta-swipe-cell>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { showToast, type SwipeCellButtonOption, type SwipeCellOnButtonClick } from '@/index'

export default defineComponent({
  name: 'ExpSwipeCell',
  setup() {
    const buttons: SwipeCellButtonOption[] = [
      {
        text: '加入收藏',
        type: 'warning'
      },
      {
        text: '删除',
        type: 'danger'
      }
    ]

    const onButtonClick: SwipeCellOnButtonClick = e => {
      console.log('button-click', e)
      showToast(`点击了 ${e.item.text}`)
    }

    return {
      buttons,
      onButtonClick
    }
  }
})
</script>

Import

js
import { TaSwipeCell } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { SwipeCellButtonOption, SwipeCellOnButtonClick } from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
buttonsSwipeCellButtonOption[]是按钮列表

SwipeCellButtonOption 的结构

ts
type SwipeCellButtonOption = {
  text: string
  type?: StateType
}

const buttons: SwipeCellButtonOption[] = [
  {
    text: '加入收藏',
    type: 'warning'
  }
]

StateType 的合法值

值说明
primary主要
default次要
success成功
warning警告
danger危险

Events

事件描述回调函数参数TypeScript 函数
button-click点击按钮时触发payload: { item: SwipeCellButtonOption, index: number }SwipeCellOnButtonClick

Slots

被挂载元素（#default）

vue
<ta-swipe-cell :buttons="buttons">
  <ta-cell label="单元格" content="向左划"></ta-cell>
</ta-swipe-cell>