Vue.jsでドラッグ可能なTreeを実装する「liquor-tree」

liquor-treeとは

liquor-treeは、ドラッグ可能なTreeを実装することができるコンポーネントライブラリです。

豊富なオプションが用意されており、ちょっとしたカスタマイズにも柔軟に対応することがかのうです。
もちろん初期の導入も容易に行うことが可能です。

【動画サイズ：85KB】

環境

インストール

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

npm

npm install liquor-tree

yarn

yarn add liquor-tree

UMD

<script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>

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

https://github.com/amsik/liquor-tree/

導入手順

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

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

import LiquorTree from 'liquor-tree'

（2）UMDの場合

const LiquorTree = window['LiquorTree'];

2.メソッドを設定

上記で取得したLiquorTreeをVue.useに取り込みます。

Treeにドラッグ機能を付けたい場合は、オプションで dnd: true を設定します。

Vue.use(LiquorTree);
new Vue({
  el: '#app', 
  data: {
    options: {
      dnd: true
    },
    items: [
      {text: 'Item 1'},
      {text: 'Item 2'},
      {text: 'Item 3', children: [
        {text: 'Item 3.1'},
        {text: 'Item 3.2'}
      ]}
    ]
  },
});
 

3. テンプレートを準備

<tree> を設置します。

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

<div id="app">
  <tree
    :options="options"
    :data="items"
    ref="tree"
  ></tree>
</div>

サンプル

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

さいごに

ドラッグ可能なTreeを実装することができるコンポーネントライブラリでした。

冒頭にも書きましたが、色々なオプションが用意されています。
面白いので、ぜひ試してみてください。

今日はこの辺でー