mint-ui —— cell swipe的使用

版权声明：本文为博主原创文章，转载务必注明出处，http://blog.csdn.net/michael_ouyang。 https://blog.csdn.net/michael_ouyang/article/details/77553102

cell swipe

可滑动的单元格，用法同 cell。

Import

按需引入：

import { CellSwipe } from 'mint-ui';

Vue.component(CellSwipe.name, CellSwipe);

全局导入：全局导入后不用再导入

import Mint from 'mint-ui'

import 'mint-ui/lib/style.css'

扫描二维码关注公众号，回复： 3020556 查看本文章

Vue.use(Mint);

API

示例

示例一：

xxx.vue：

<template>
  <div class="page-cell">
    <div class="page-title">Cell Swipe</div>
    <mt-cell-swipe
      v-for="n in 10"
      :right="rightButtons"
      title="swipe me">
    </mt-cell-swipe>
  </div>
</template>

<script>
  export default {
    created() {
      this.rightButtons = [
        {
          content: 'Mark as Unread',
          style: { background: 'lightgray', color: '#fff' }
        },
        {
          content: 'Delete',
          style: { background: 'red', color: '#fff' },
          handler: () => this.$messagebox('delete')
        }
      ];
    },
    methods: {
      leftButtonHandler(evt) {
        console.log(123);
      }
    }
  };
</script>

show：

向左滑动，出现了2个按钮

点击“delete”按钮，弹窗