SwipeAction 滑动单元格

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

代码演示

基础用法

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

<hd-swipe-action :operations="operations" :index="index" :moveIndex="moveIndex" @updateIndex="onUpdateIndex">
  <hd-cell title="哈喽啊" placeholder="单元格的内容" value="树先生"></hd-cell>
</hd-swipe-action>

export default {
  data() {
    return {
      index: 0,
      moveIndex: -1,
      operations: [
        {
          text: '复制', // 操作项文字
          value: 'copy', // 操作项值
          confirmNeed: false, // 操作项是否需要确认
          confirmText: '', // 确认文本
          type: 'info' // 'success' | 'error' | 'warn' | 'info'
        },
        {
          text: '删除', // 操作项文字
          value: 'delete', // 操作项值
          confirmNeed: true, // 操作项是否需要确认
          confirmText: '确认删除', // 确认文本
          type: 'error'
        }
    ]
    }
  },
  methods: {
    onUpdateIndex(index: number) {
      this.moveIndex = index as any
    }
  }
}

禁止滑动

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

<hd-swipe-action :operations="operations" :index="index" :moveIndex="moveIndex" :swipeAble="false" @updateIndex="onUpdateIndex">
  <hd-cell title="哈喽啊" placeholder="单元格的内容" value="树先生"></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	组件内部显示内容	-