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
},
// ...
// ...
});