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

 更新时间:2019年05月16日 16:25:42   作者:Reming  
这篇文章主要介绍了atom-design(Vue.js移动端组件库)手势组件使用教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

介绍

atom-design经过几个月的开发,以及这段时间的修复bug,对js,css压缩,按需引入处理等等的性能优化,现在已经逐渐完善.做这套UI考虑到很多性能的问题,以及如何让开发者更自由、更简单的去使用。这篇文章主要讲使用Gesture(手势)相关组件的感受。

Gesture(手势)相关组件

•Carousel(传送带)
•SlideItem (滑动条)
•Range (区域选择)
•Pull Gesture (上下拉动手势)

Carousel(传送带)

import {Carousel} from 'atom-design';
Vue.component(Carousel.name, Carousel);
<carousel>
 <div class="carousel-item item1">item1</div>
 <div class="carousel-item item2">item2</div>
 <div class="carousel-item item3">item3</div>
</carousel>

使用Carousel来实现轮播图,每个一级子节点都会当成一个轮播滑块

效果如图:

 也可以在配置Carousel

pagination(Boolean):是否有分页
auto(Boolean):是否自动轮播
loop(Boolean):是否循环
time(Number):间隔多久轮播(auto为true时生效)
v-model(Number): 绑定轮播的序号(从0开始),也可以设置v-model的初始值来设置轮播从设置的序号开始轮播
<carousel :pagination="true" :auto="true" :loop="true" :time="5000" v-model="slideIdx">
 <div class="carousel-item item1">item1</div>
 <div class="carousel-item item2">item2</div>
 <div class="carousel-item item3">item3</div>
</carousel>

你会发现使用非常简单,而且轮播内容完全可以自己定制,不限制是图片,也可以是任何自定义DOM

SlideItem (滑动条)

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

import {SlideItem} from 'atom-design';
Vue.component(SlideItem .name, SlideItem);
<atom-slide v-model="isClose">
 <div class="slide-action" slot="rightAction">
  <div class="action edit" @click="show">编辑</div>
  <div class="action delete" @click="show">删除</div>
 </div>
 <div class="slide-demo">左右拖拽</div>
 <div class="slide-action" slot="leftAction">
  <div class="action info" @click="show">查看</div>
 </div>
</atom-slide>

效果如下图所示

 

只需要通过slot来指定左右的操作菜单(可选值leftAction/rightAction),便能直接使用滑动功能. 如果你只需要左边或者右边的滑动菜单,则只设置一边即可,组件内部会自动限制另一边的滑动。内容无需通过slot命名,默认的未命名的插槽名都作为内容。

v-model绑定slideItem组件开关,v-model指为false时,则slideItem会自动过渡到未滑动时的状态

Range(区域选择)

import {Range} from 'atom-design';
Vue.component(Range.name, Range);
<atom-range v-model="range2" color="#dd2622"></atom-range>

效果如下所示:

 

v-model绑定滑动选择的数值,color可以自定义主题颜色

Pull Gesture (上拉下拉手势)

此组件一般用来下拉来更新数据也可以通过上拉来做一些加载数据或者更新的操作

效果如下图所示:

 

支持全局引入和按需引入

全局引入

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

全局引入atom-design的js和css会全部引入到项目中,因此尽量选择按需引入

按需引入

按需引入步骤

使用 babel-plugin-component 插件来实现按需引入

(1)先安装babel-plugin-component

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

(2)配置.babelrc

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

(3)引入所需组件

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)
   }
  }
 })

// 使用两个组件,按需引入后打包完的css也只有3kb

// 打包后的js也只有使用到的组件才会打包进去

非常感谢您能够看到这里,这套UI现在已经趋于完善,你可以在生产项目中试着使用,如果有碰到问题可以在以下github地址提issue, 我们会尽最快的时间去解决。

github地址

https://github.com/Reming9602...

中文文档

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

总结

以上所述是小编给大家介绍的atom-design(Vue.js移动端组件库)手势组件使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • 浅谈Vue开发人员的7个最好的VSCode扩展

    浅谈Vue开发人员的7个最好的VSCode扩展

    这篇文章主要介绍了浅谈Vue开发人员的7个最好的VSCode扩展,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Nuxt使用Vuex的方法示例

    Nuxt使用Vuex的方法示例

    这篇文章主要介绍了Nuxt使用Vuex的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue+iview的菜单与页签的联动方式

    vue+iview的菜单与页签的联动方式

    这篇文章主要介绍了vue+iview的菜单与页签的联动方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07
  • Vue中router.beforeEach与beforeRouteEnter的区别及说明

    Vue中router.beforeEach与beforeRouteEnter的区别及说明

    这篇文章主要介绍了Vue中router.beforeEach与beforeRouteEnter的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue 监听元素前后变化值实例

    Vue 监听元素前后变化值实例

    这篇文章主要介绍了Vue 监听元素前后变化值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • axios拦截设置和错误处理方法

    axios拦截设置和错误处理方法

    下面小编就为大家分享一篇axios拦截设置和错误处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue获取当前日期时间(使用moment和new Date())

    vue获取当前日期时间(使用moment和new Date())

    在项目开发中我遇到了日期范围选择器,两种获取当前日期并做处理的写法,这里记录一下,下面这篇文章主要给大家介绍了关于vue获取当前日期时间(使用moment和new Date())的相关资料,需要的朋友可以参考下
    2023-06-06
  • 离线搭建vue环境运行项目完整步骤

    离线搭建vue环境运行项目完整步骤

    这篇文章主要给大家介绍了关于离线搭建vue环境运行项目的相关资料,文中通过实例代码以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • Vue3中emits与attrs的区别分析

    Vue3中emits与attrs的区别分析

    这篇文章主要给大家介绍了关于Vue3中emits与attrs区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • vue插件v-touch的坑及解决(不能上下滑动)

    vue插件v-touch的坑及解决(不能上下滑动)

    这篇文章主要介绍了vue插件v-touch的坑及解决(不能上下滑动),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论