vue-swiper-layout

中文 | English

vue slide list component. vue 滑动列表组件

安装

npm install --save vue-swiper-layout

使用

全局注册

import Vue from 'vue'
import VueSwiperLayout from 'vue-swiper-layout'

Vue.use(VueSwiperLayout)

局部注册

import { swiperLayout, swiperLayoutBox } from 'vue-swiper-layout'

export default {
    components: {
        swiperLayout,
        swiperLayoutBox
    }
}

<swiper-layout-box> // 用来包裹 swiper-layout 的容器
    
  <swiper-layout
                type="right" 
                v-model="open"
                menuHeight="60px" 
                menuWidth="40%"
                :swiperConfig="config"
                @offset="offsetEvent"
                offsetNumber="120">
    <template slot="content">
      <span>列表内容</span>
    </template>
    <template slot="menu">
      <span class="menu-item">功能菜单</span>
    </template>
  </swiper-layout>
    
</swiper-layout-box>

问题

1.关于样式

本组件未提供任何样式，请根据需求自行定义样式

2.用 v-for 循环，如何删除本组件？

推荐使用 v-if 动态删除本组件，实例代码见 /test/test01.vue

3.当一个菜单打开的时候怎么关闭其他菜单？

实例代码见 /test/test02.vue

更新

• v1.0.9 解决了当 type = right 时候的滑动用户体验不好，和异常删除问题

License

MIT