Vue.js的滑动(触摸滑块)组件 – vue-swipe-mobile

Vue.js的滑动(触摸滑块)组件 – vue-swipe-mobile

插件名称:vue-swipe-mobile

发布时间:2020年8月27日

插件作者:pspgbhu

中文官网 GitHub下载

Vue.js应用程序的最小移动优先滑动器(触摸滑块)组件。

安装和下载:

# NPM
$ npm install c-swipe --save

使用

注册组件

// main.js

// 引入 c-swipe 主文件
import 'c-swipe/dist/swipe.css';
import { Swipe, SwipeItem } from 'c-swipe';

// 全局注册组件
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);

在 .vue 单文件组件中使用:

<swipe
  v-model="index"
  style="text-align: center; line-height: 80px; height: 100px; background: #42b983;"
>
  <swipe-item style="height: 100px; line-height: 100px">item1</swipe-item>
  <swipe-item style="height: 100px; line-height: 100px">item2</swipe-item>
  <swipe-item style="height: 100px; line-height: 100px">item3</swipe-item>
</swipe>
new Vue({
  data: function () {
    return {
      index: 0, // two way
    };
  },
});

或者,你想在 html 标签中直接引用

<link href="https://unpkg.com/c-swipe/dist/swipe.css" rel="stylesheet"></head>
<script type="text/javascript" src="https://unpkg.com/c-swipe/dist/swipe.js"></script>
var vueSwipe = swipe.Swipe;
var vueSwipeItem = swipe.SwipeItem;

new Vue({
  el: 'body',
  // 注册组件
  components: {
    'swipe': vueSwipe,
    'swipe-item': vueSwipeItem
  },
  // ...
  // ...
});
相关插件