Swipeout 滑动栏

介绍

可以向左滑动来展示操作按钮的组件。

引入

import { Swipeout } from 'mind-ui-vue';
Vue.use(Swipeout);

示例

可以向左滑动来展示操作按钮的组件。

<m-swipeout
  v-for="item in list"
  :key="item.id"
  auto-close
  @click="handleClick(item.id)"
  @change="handleChange"
>
  <div class="demo-content swipeout-demo-item">
    <div class="name">{{ item.name }}</div>
    <div class="content">
      <div class="title">{{ item.title }}</div>
      <div class="desc">{{ item.desc }}</div>
    </div>
    <div class="info">
      <div class="time">{{ item.time }}</div>
    </div>
  </div>

  <div class="btn-group" slot="button">
    <div class="btn up" style="width: 80px" @click="handleUp(item.id)">
      置顶
    </div>
    <div
      v-if="item.id === 2"
      class="btn delete"
      style="width: 80px"
      @click="handleDelete(item.id)"
    >
      删除
    </div>
  </div>
</m-swipeout>

export default {
  name: "swipeout",
  data() {
    return {
      list: [
        {
          id: 1,
          name: "盖",
          title: "德玛西亚之力-盖伦",
          desc: "人在塔在！",
          time: "下午5:01",
        },
        {
          id: 2,
          name: "赵",
          title: "德邦总管-赵信",
          desc: "一点寒芒先到，随后枪出如龙。",
          time: "下午5:01",
        },
        {
          id: 3,
          name: "嘉",
          title: "德玛西亚皇子-嘉文四世",
          time: "下午5:01",
        },
        {
          id: 4,
          name: "泰",
          title: "蛮族之王-泰达米尔",
          time: "昨天",
        },
        {
          id: 5,
          name: "凯",
          title: "皮城女警-凯瑟琳",
          desc: "真抱歉，少年们，我把真皮手套忘在家里了。",
          time: "星期五",
        },
      ],
      instance: null,
    };
  },

  methods: {
    handleChange(instance) {
      this.instance = instance;
    },

    handleUp(id) {
      this.$message(`tap ID: ${id}`);
    },

    handleDelete(id) {
      const toast = this.$toast({
        message: "删除中",
        type: "loading",
      });

      setTimeout(() => {
        toast.close();

        this.instance.close();

        let index = this.list.findIndex((item) => item.id === id);
        this.list.splice(index, 1);

        this.$toast("删除成功");
      }, 1200);
    },

    //
    handleClick(id) {
      this.$message(`click ID: ${id}`);
    },
  },
};

Api

Props

参数	说明	类型	默认值
async-close	是否异步关闭	Boolean	false

Slots

名称	说明
—	自定义展示内容
button	自定义操作按钮内容

Events

事件名称	说明	回调参数
$close	关闭实例	—
open	打开时触发	当前组件实例
close	关闭时触发	当前组件实例
change	打开或关闭时触发	当前组件实例
click	点击时触发	—