介绍

经过几个月的开发、bug修复、js、css压缩、按需导入处理等，Atom-design已经逐渐完善。制作这个UI的时候考虑了很多性能问题，以及如何让开发者更自由、更简单的使用。本文主要讲使用手势相关组件的感受。

手势相关组件

转盘(幻灯片项目)范围(拉动手势)

传送带

从“atom-design”导入{ Carousel }；Vue.component(Carousel.name，Carousel)；Carousel div class=' Carousel-item 1 ' item 1/div class=' Carousel-item 2 ' item 2/div div class=' Carousel-item 3 ' item 3/div/Carousel使用Carousel实现Carousel图，每个一级子节点将被视为一个Carousel滑块

效果如下：

您也可以配置转盘

分页(Boolean):是否有自动分页(Boolean):是否自动轮播循环(Boolean):是否循环时间(Number):多久轮播一次(auto为真时有效)v-model(Number):绑定轮播的序列号(从0开始)。您也可以设置v-model的初始值来设置转盘。carousel carousel :分页=' true ' : auto=' true ' : loop=' true ' : time=' 5000 ' v-model=' slide idx ' div class=' carouse L-item 1 ' item 1/div class=' carousel-item 2 ' item 2/div class=' carousel-item 3 ' item 3/div/carousel，你会发现使用起来非常简单，而且carousel内容可以自己定制，不限于此

幻灯片项目(滑动条)

这是一个通过滑动显示操作的组件

从“atom-design”导入{ slide item }；Vue.component(SlideItem。名称，slide item)；atom-slide v-model=' is close ' Div class=' slide-action ' slot=' right action ' Div class=' action edit ' @ click=' show ' edit/Div class=' action delete ' @ click=' show ' delete/Div/Div class=' slide-demo '左右拖动/Div class=' slide-action ' slot=' left action ' Div class=' action info ' @ click=' show ' view/Div/Div/atom-slide

通过插槽指定左右操作菜单(可选值leftAction/rightAction)，可以直接使用滑动功能。如果只需要左右滑动菜单，只能设置一侧，另一侧的滑动会自动限制在组件内部。内容不需要按插槽命名，默认未命名的插槽名称用作内容。

v-model绑定到slideItem组件开关。当v-model引用false时，slideItem将自动转换到不滑动的状态

范围(区域选择)

从“原子设计”导入{ Range }；Vue.component(Range.name，Range)；原子范围v-model=' range 2 ' color=' # DD 2622 '/原子范围的效果如下：

V-model绑定幻灯片的选定值，并且颜色可以自定义主题颜色

拉手势(向上拉和向下拉手势)

这个组件一般用来下拉更新数据，也可以通过拉起来做一些数据加载或者更新操作。

效果如下图所示：

支持全球推介和按需推介

全球简介

从“atom-design”导入atomD导入“atom-design/bundle/style . CSS”；vue . use(Atomd)；全局引入atom-design的Js和css都将被引入到项目中，因此请尝试根据需要引入它

按需引入

根据需要介绍步骤

使用巴别塔插件组件插件实现按需引入

(1)首先安装巴别塔插件组件

NPM安装巴别塔-插件-组件-保存-开发(2)配置。babelrc

['plugins' : [['component '，{ ' library name ' : ' atom-design '，' style ' : true }](3)介绍所需组件

从“atom-design”导入{Picker，Button }；Vue.component(Button.name，Button)；const monthArr=[{ text: 1}，{ text: 2}，{ text : 3 }]Picker({ data :[{ text : 1996，Childrens3360 : monthArr }，{ text: 1997，children : monthArr }，{ text: 1998，children : monthArr }，{ text: 1999，children

//仅打包js中使用的组件

非常感谢你看到这个。这套UI现在已经完善了。你可以尝试在生产项目中使用它。如果您遇到任何问题，可以在下面的github地址询问问题，我们会尽最大努力尽快解决。

Github地址

https://github.com/Reming9602.

中文文件

https://atom-design.github.io.

摘要

以上是边肖介绍的使用atom-design(Vue.js移动组件库)手势组件的教程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！