一套很是高效、乾淨、簡單、靈活的組件庫

介紹

atom-design通過幾個月的開發，以及一段長時間的修復bug，對js,css壓縮，按需引入處理等等的性能優化,如今已經逐漸完善.作這套UI考慮到不少性能的問題，以及如何讓開發者更自由、更簡單的去使用。這篇文章主要講使用Gesture(手勢)相關組件的介紹。

github地址

https://github.com/reming0227... （能夠點個star謝謝，給咱們一點動力)

中文文檔

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

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也只有使用到的css纔會打包進入，幾個組件僅僅只有3kb

// 按需引入後打包的js也只有使用到的組件纔會打包進去

很是感謝您可以看到這裏，這套UI如今已經趨於完善，你能夠在生產項目中試着使用，若是有碰到問題能夠在如下github地址提issue, 咱們會盡最快的時間去解決您遇到的問題。