シールみたいにペリペリ剥がせて楽しい「vue-sticker」

vue-stickerとは

vue-stickerは、シールみたいにペリペリ剥がせるコンポーネントを実装できるライブラリです。

環境

インストール

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

npm

npm install --save-dev vue-sticker

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-sticker.min.js"></script>

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

https://github.com/KamilOcean/vue-sticker

導入手順

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

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

import VueSticker from 'vue-sticker'

（2）WEBページの場合

const VueSticker  = window.VueSticker.default;

2.メソッドを設定

上記で取得したVueSticker を component プロパティに取り込みます。

let app = new Vue({
  el: '#app',
  components: {
    'vue-sticker': VueSticker
  },
});

3. テンプレートを準備

上記で取得したコンポーネントを配置します。

<vue-sticker> を設置し、d プロパティでコンポーネントの直径を設定、class-name プロパティでコンポーネントに独自クラスを設定できます。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <vue-sticker :d="300" class-name="good"></vue-sticker>
</div>

4.サンプル用のスタイル

基本的なコンポーネントスタイルが無いので、サンプル用に下記のスタイルを適用します。

.good__main-image,
.good__backside-image {
  background-color: rgba(0, 0, 0, .05);
  background-image: url(https://vuejs.org/images/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: center;
}

.good__backside-image {
  opacity: .7
}

サンプル

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

さいごに

シールみたいにペリペリ剥がせるコンポーネントを実装できるライブラリでした。

キャンペーンサイトとかで利用できそうな気がしますね。

今日はこの辺でー