Vue-Touch-Rippleとは

 

Vue-Touch-Rippleはタッチイベントにrippleを実装するライブラリです。

rippleの速度や色、透過をカスタマイズすることができます。

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install vue-touch-ripple --save

CDN

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-touch-ripple.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-touch-ripple.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/surmon-china/vue-touch-ripple

導入手順

rippleを実装します。

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

import VueTouchRipple from 'vue-touch-ripple'
import 'vue-touch-ripple/dist/vue-touch-ripple.css'
Vue.use(VueTouchRipple)

（2）WEBページの場合

Vue.use(VueTouchRipple)

2.rippleのメソッドを設定

new Vue({
    el: "#app",
    data: {
        items: [
            {id:1},
            {id:2},
            {id:3},
            {id:4},
            {id:5},
            {id:6},
            {id:7},
            {id:8},
            {id:90},
            {id:10},
            {id:11},
            {id:12},
        ]
    }
})

3. <touch-ripple>テンプレートを準備

rippleを実装したいタグを<touch-ripple>で囲みます。
この<touch-ripple>にcolorやspeedのプロパティを設定できます。

<div id="app">
  <touch-ripple class="h1-box">
    <h1 class="h1">h1タグにrippleを設定</h1>
  </touch-ripple>
  <ul>
    <li v-for="item in items">
      <touch-ripple class="li-box">
        item-{{item.id}}
      </touch-ripple>
    </li>
  </ul>
  <div class="examples">
    <div class="example">
      <div class="button-group">
        <touch-ripple class="button-group-box" color="#3c763d">
          <button class="button b-2">rippleの色を変更</button>
        </touch-ripple>
        <touch-ripple class="button-group-box" :speed="2">
          <button class="button b-3">rippleのスピードを変更</button>
        </touch-ripple>
      </div>
    </div>
  </div>
</div>

 

サンプル

>>専用ページで確認する

 

プロパティ

<touch-ripple>にプロパティを設定できます。

以下がプロパティの設定一覧です。

 

名	型	default
speed	Number	1
color	String	#fff
opacity	Number	0.3
transition	String	ease-out

 

さいごに

タッチイベントにrippleをを実装するライブラリでした。

今日はこの辺でー