上下左右からDrawerコンポーネント「vue-simple-drawer」

上下左右からDrawerコンポーネント「vue-simple-drawer」 15

vue-simple-drawerとは

vue-simple-drawerは、上下左右から飛ぶだして跳ねるDrawerコンポーネントライブラリです。

マスクレーヤーをクリックして閉じるオプションなどがあります。

開閉をTRUE/FALSEで管理するだけなので、非常にシンプルです。

 

上下左右からDrawerコンポーネント「vue-simple-drawer」 15

 

環境

Vue 2.6.10
vue-simple-drawer 1.0.6

 

インストール

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

npm

npm install vue-simple-drawer --save

CDN

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

 

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

https://github.com/dreambo8563/vue-simple-drawer

 

導入手順

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

(1)ES6等の場合 [注意]モジュール版は未検証です。

import Drawer from "vue-simple-drawer"

(2)CDNの場合

const Drawer = window['vue-simple-drawer'].default;

2.メソッドを設定

Drawercomponentsに取り込みます。

new Vue({
  el: '#app',
  components: {
    "drawer":Drawer
  },
  data: {
    open: false,
    align: 'left'
  },
  methods: {
    toggle:function() {
      this.open = !this.open
    }
  }
});

3. テンプレートを準備

<drawer> を設置します。

align プロパティは必須です。
Drawerをどこに表示するのかを指定します。

 

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

<div id="app">
  <div class="demo-container">
    <div><input type="radio" id="left" value="left" v-model="align"><label for="left">left</label></div>
    <div><input type="radio" id="right" value="right"  v-model="align"><label for="right">right</label></div>
    <div><input type="radio" id="up" value="up"  v-model="align"><label for="up">up</label></div>
    <div><input type="radio" id="down" value="down"  v-model="align"><label for="down">down</label></div>
  </div>
  <button @click="toggle">toggle</button>
  <drawer @close="toggle" :align="align" :closeable="true" :mask-closable="true">
    <div v-if="open">content here</div>
  </drawer>
</div>

 

サンプル

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

 

さいごに

上下左右から飛ぶだして跳ねるDrawerコンポーネントライブラリでした。

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Menu, UI Components, vue.js, ライブラリ
-, , ,