Vue3 ライブラリ「vue-float-menu」を使用して移動可能なメニューを実装する

作成日 2021.05.29
更新日 2021.05.31
Vue.js
Vue3, ライブラリ

ライブラリ「vue-float-menu」を使用して、移動可能なメニューを実装することが可能です。ここでは、vue-float-menuを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. Vue3環境構築
3. vue-float-menuインストール
4. vue-float-menu使い方
5. 起動

環境

OS windows10 64bit
vue 3.0.0
node v14.6.0
yarn 1.22.10
@vue/cli 4.5.9

Vue3環境をwindowsに構築する

Vue3環境構築

vue-cliを使用して構築してます。

npm install -g @vue/cli

npm init

vue upgrade --next

## vueappというプロジェクトを作成
vue create vueapp

## vue 3を選択
Vue CLI v4.5.13
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

## 移動
cd vueapp

vue-float-menuインストール

yarnを使用して、インストールします。

yarn add vue-float-menu

yarnがインストールされていない場合は、以下のコマンドでインストール可能です。

npm install -g yarn

vue-float-menu使い方

src配下のApp.vueを下記のように編集します。

<template>
  <div class="container">
    <float-menu
      :position="'top left'"
      :dimension="50"
      :menu-data="items"
      :on-selected="handleSelection"
    >
      Drag
    </float-menu>
  </div>
</template>

<script>
import { FloatMenu } from "vue-float-menu";
import "vue-float-menu/dist/vue-float-menu.css";

export default {
  components: {
    FloatMenu,
  },
  setup() {
    const handleSelection = (selectedItem) => {
      console.log(selectedItem);
    };
    return {
      handleSelection,
    };
  },
  data() {
    return {
      items: [
        { name: "New" },
        {
          name: "Edit",
          subMenu: {
            name: "edit-items",
            items: [{ name: "Copy" }, { name: "Paste" }],
          },
        },
        {
          name: "Open Recent",
        },
        {
          name: "Save",
        },
      ],
    };
  },
};
</script>
<style>
.container {
  margin: 0 auto;
  margin-top: 200px;
  min-height: 100vh;
  width: 500px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>