SwipeAction 滑动单元格

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

代码演示

基础用法

侧滑组件内嵌套需要操作的元素，需要传入index和moveIndex定位到当前滑动的元素，侧滑后操作按钮内容通过operations决定。

<hd-swipe-action
  :swipeAble="true"
  :operations="operations"
  :index="index"
  @operate="doOperate($event)"
  @updateIndex="swipeAction.updateIndex"
  :moveIndex="swipeAction.moveIndex"
  v-for="(n, index) in 10"
  :key="index"
>
  <hd-cell title="哈喽啊" placeholder="单元格的内容" value="树先生" isLink></hd-cell>
</hd-swipe-action>

<script lang="ts" setup>
import { useSwipeAction } from '@/uni_modules/fant-mini-plus/components/hd-swipe-action'
import { computed } from 'vue'

const swipeAction = useSwipeAction()
const operations = computed(() => {
  const operation: Operation[] = [
    {
      text: '复制', // 操作项文字
      value: 'copy', // 操作项值
      confirmNeed: false, // 操作项是否需要确认
      confirmText: '', // 确认文本
      type: 'info'
    },
    {
      text: '删除', // 操作项文字
      value: 'delete', // 操作项值
      confirmNeed: true, // 操作项是否需要确认
      confirmText: '确认删除', // 确认文本
      type: 'error'
    }
  ]

  return operation
})

function doOperate(e) {
  console.log(e)
}
</script>

禁止滑动

通过swipeAble属性设置为false即可以将当前元素禁止滑动，默认为true。

<hd-swipe-action
  :swipeAble="false"
  :operations="operations"
  :index="index"
  @operate="doOperate($event)"
  @updateIndex="swipeAction.updateIndex"
  :moveIndex="swipeAction.moveIndex"
  v-for="(n, index) in 10"
  :key="index"
>
  <hd-cell title="哈喽啊" placeholder="单元格的内容" value="树先生" isLink></hd-cell>
</hd-swipe-action>

Props

Name	Description	Type	Required	Default
index	当前项的下标	Number	true	-
moveIndex	滑动项的下标	Number	true	-
swipeAble	是否允许滑动	Boolean	false	默认值是：true
operations	自定义操作数组	Array	true	[]

Events

Event Name	Description	Parameters
click	点击当前组件时触发	-
updateIndex	更新滑动项下标	index:Number 被操作项下标
operate	点击自定义操作时触发	value:String 自定义操作的值

Slots

Name	Description	Default Slot Content
default	组件内部显示内容	-