SwipeCell 滑动单元格

使用指南

实现对单元格左右侧滑，从⽽进⾏其他操作。

规则

代码演示

查看代码

<template>
  <div>
    <h3-swipe-cell 
      :leftWidth="60" 
      :rightWidth="120" 
      ref="swipeCell" 
      @close="handleCellClose"
      @open="handleCellOpen"
    >
      <div slot="left" class="swipe-cell-left">
        <h3-button
          type="success"
          @click.stop="handleBtnClick('leftBtn')"
        >
          操作
        </h3-button>
        
      </div>
      <h3-cell title="单元行" is-link :touchable="false"></h3-cell>
      <div slot="right" class="swipe-cell-right">
        <h3-button
          type="primary"
          @click="handleBtnClick('leftBtn')"
        >
          操作
        </h3-button>
        <h3-button
          type="error"
          @click="handleBtnClick('leftBtn')"
        >
          删除
        </h3-button>
      </div>
    </h3-swipe-cell>
  
    <h3-swipe-cell :leftWidth="100" :rightWidth="120" ref="swipeCell">
      <div slot="left" class="swipe-cell-left" style="width: 100px">
        自定义内容
        
      </div>
      <h3-cell title="单元行" is-link :touchable="false"></h3-cell>
      <div slot="right" class="swipe-cell-right">
        自定义内容
      </div>
    </h3-swipe-cell>
  </div>
</template>

<script>
import H3SwipeCell from '@/components/h3-swipe-cell';
import H3Button from '@/components/h3-button';
import H3Cell from '@/components/h3-cell';
export default {
  components: {
    H3SwipeCell,
    H3Button,
    H3Cell
  },
  data () {
    return {
      
    }
  },
  methods: {
    handleCellClose () {
      console.log('close');
    },
    handleCellOpen () {
      console.log('open');
    },
    handleBtnClick (btnName) {
      console.log('handleBtnClick')
      this.$refs['swipeCell'].close();
    }
  }
}
</script>
<style lang="less" scoped>
.list-item {
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.swipe-cell-left {
  width: 60px;
}
.swipe-cell-right {
  width: 120px;
}
.swipe-cell-left, .swipe-cell-right {
  display: flex;
  flex-direction: row;
  height: 100%;
  background: #E8EAF1;
  justify-content: center;
  align-items: center;
  .h3think-button {
    height: 100%;
    border: none;
    border-radius: 0;
    font-size: 14px;
    flex: 1;
    padding: 0;
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

新增组件

API

Prop

属性	说明	类型	默认值
disabled	是否禁用滑动	boolean	false
leftWidth	左侧滑动区域宽度	number	0
rightWidth	右侧滑动区域宽度	number	0

Event

事件名	说明	参数
close	关闭时触发	-
open	打开时触发	-

Slots

参数	说明
default	自定义显示内容
left	左侧滑动内容
right	右侧滑动内容