atom-design(Vue.js移动端组件库)手势组件使用教程

import {Carousel} from 'atom-design';
Vue.component(Carousel.name, Carousel);

 
item1
 
item2
 
item3

pagination(Boolean)：是否有分页
auto(Boolean)：是否自动轮播
loop(Boolean)：是否循环
time(Number)：间隔多久轮播（auto为true时生效）
v-model(Number): 绑定轮播的序号（从0开始）,也可以设置v-model的初始值来设置轮播从设置的序号开始轮播

 
item1
 
item2
 
item3

import {SlideItem} from 'atom-design';
Vue.component(SlideItem .name, SlideItem);

 

  
编辑
  
删除
 
 
左右拖拽
 

  
查看
 

import {Range} from 'atom-design';
Vue.component(Range.name, Range);

import atomD from 'atom-design';
import 'atom-design/bundle/style.css';
Vue.use(atomD);

npm install babel-plugin-component --save-dev

[
 "plugins": [
  ["component", {
   "libraryName": "atom-design",
   "style": true
  }]
 ]
]

import {Picker, Button} from 'atom-design';
Vue.component(Button.name, Button);
const mOnthArr= [{
 text: 1
},
{
 text: 2
},
{
 text: 3
}]
Picker({
  data: [{
   text: 1996,
   childrens: monthArr
  },
  {
   text: 1997,
   childrens: monthArr
  },
  {
   text: 1998,
   childrens: monthArr
  },
  {
   text: 1999,
   childrens: monthArr
  },
  {
   text: 2000,
   childrens: monthArr
  }],
  submitBtn: {
   style: '',
   event: (res) => {
    // 选中的数据
    console.log(res)
   }
  }
 })