atom-design(Vue.js移動端組件庫)手勢組件使用教程

2019-11-19 11:32:42

字體：大中小

供稿：網(wǎng)友

介紹

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

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

•Carousel(傳送帶)
•SlideItem (滑動條)
•Range (區(qū)域選擇)
•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來實現(xiàn)輪播圖，每個一級子節(jié)點都會當(dāng)成一個輪播滑塊

效果如圖：

也可以在配置Carousel

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

你會發(fā)現(xiàn)使用非常簡單，而且輪播內(nèi)容完全可以自己定制，不限制是圖片，也可以是任何自定義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），便能直接使用滑動功能. 如果你只需要左邊或者右邊的滑動菜單，則只設(shè)置一邊即可，組件內(nèi)部會自動限制另一邊的滑動。內(nèi)容無需通過slot命名，默認(rèn)的未命名的插槽名都作為內(nèi)容。

v-model綁定slideItem組件開關(guān)，v-model指為false時，則slideItem會自動過渡到未滑動時的狀態(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綁定滑動選擇的數(shù)值，color可以自定義主題顏色

Pull Gesture （上拉下拉手勢）

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

效果如下圖所示：

支持全局引入和按需引入

全局引入

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

全局引入atom-design的js和css會全部引入到項目中，因此盡量選擇按需引入

按需引入

按需引入步驟

使用 babel-plugin-component 插件來實現(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)   }  } })

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