快捷導(dǎo)航

atom-design(Vue.js移動(dòng)端組件庫(kù))手勢(shì)組件使用教程

更新時(shí)間：2019年05月16日 16:25:42 作者：Reming

這篇文章主要介紹了atom-design(Vue.js移動(dòng)端組件庫(kù))手勢(shì)組件使用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

介紹

atom-design經(jīng)過(guò)幾個(gè)月的開(kāi)發(fā)，以及這段時(shí)間的修復(fù)bug，對(duì)js,css壓縮，按需引入處理等等的性能優(yōu)化,現(xiàn)在已經(jīng)逐漸完善.做這套UI考慮到很多性能的問(wèn)題，以及如何讓開(kāi)發(fā)者更自由、更簡(jiǎn)單的去使用。這篇文章主要講使用Gesture(手勢(shì))相關(guān)組件的感受。

Gesture(手勢(shì))相關(guān)組件

•Carousel(傳送帶)
•SlideItem (滑動(dòng)條)
•Range (區(qū)域選擇)
•Pull Gesture (上下拉動(dòng)手勢(shì))

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來(lái)實(shí)現(xiàn)輪播圖，每個(gè)一級(jí)子節(jié)點(diǎn)都會(huì)當(dāng)成一個(gè)輪播滑塊

效果如圖：

也可以在配置Carousel

pagination(Boolean)：是否有分頁(yè)
auto(Boolean)：是否自動(dòng)輪播
loop(Boolean)：是否循環(huán)
time(Number)：間隔多久輪播（auto為true時(shí)生效）
v-model(Number): 綁定輪播的序號(hào)（從0開(kāi)始）,也可以設(shè)置v-model的初始值來(lái)設(shè)置輪播從設(shè)置的序號(hào)開(kāi)始輪播
<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>

你會(huì)發(fā)現(xiàn)使用非常簡(jiǎn)單，而且輪播內(nèi)容完全可以自己定制，不限制是圖片，也可以是任何自定義DOM

SlideItem (滑動(dòng)條)

這是通過(guò)滑動(dòng)來(lái)顯示操作的組件

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>

效果如下圖所示

只需要通過(guò)slot來(lái)指定左右的操作菜單（可選值leftAction/rightAction），便能直接使用滑動(dòng)功能. 如果你只需要左邊或者右邊的滑動(dòng)菜單，則只設(shè)置一邊即可，組件內(nèi)部會(huì)自動(dòng)限制另一邊的滑動(dòng)。內(nèi)容無(wú)需通過(guò)slot命名，默認(rèn)的未命名的插槽名都作為內(nèi)容。

v-model綁定slideItem組件開(kāi)關(guān)，v-model指為false時(shí)，則slideItem會(huì)自動(dòng)過(guò)渡到未滑動(dòng)時(shí)的狀態(tài)

Range（區(qū)域選擇）

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

效果如下所示：

v-model綁定滑動(dòng)選擇的數(shù)值，color可以自定義主題顏色

Pull Gesture （上拉下拉手勢(shì)）

此組件一般用來(lái)下拉來(lái)更新數(shù)據(jù)也可以通過(guò)上拉來(lái)做一些加載數(shù)據(jù)或者更新的操作

效果如下圖所示：

支持全局引入和按需引入

全局引入

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

全局引入atom-design的js和css會(huì)全部引入到項(xiàng)目中，因此盡量選擇按需引入

按需引入

按需引入步驟

使用 babel-plugin-component 插件來(lái)實(shí)現(xiàn)按需引入

(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) => {
    // 選中的數(shù)據(jù)
    console.log(res)
   }
  }
 })

// 使用兩個(gè)組件，按需引入后打包完的css也只有3kb