Vue3 ライブラリ「vue-color-kit」を使用してcolor pickerを実装する

作成日 2021.06.01
Vue.js
Vue3

ライブラリ「vue-color-kit」を使用して、color pickerを実装することが可能です。ここでは、vue-color-kitを利用するための手順と簡単な使い方を記述してます。

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

環境

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

Vue3環境をwindowsに構築する

Vue3環境構築

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

## @vue/cliインストール
npm install -g @vue/cli

## 初期化
npm init

## upgrade
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-color-kitインストール

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

yarn add vue-color-kit

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

npm install -g yarn

vue-color-kit使い方

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

<template>  
    <ColorPicker
      theme="light"
      :color="color"
      :sucker-hide="false"
      :sucker-canvas="suckerCanvas"
      :sucker-area="suckerArea"
      @changeColor="changeColor"
      @openSucker="openSucker"
    />
</template>

<script>

import { ColorPicker } from "vue-color-kit";
import "vue-color-kit/dist/vue-color-kit.css";

export default {
  name: "App",
  components: {    
    ColorPicker,
  },
  data() {
    return {
      color: "#59c7f9",
      suckerCanvas: null,
      suckerArea: [],
      isSucking: false,
    };
  },
  methods: {
    changeColor(color) {
      const { r, g, b, a } = color.rgba;
      this.color = `rgba(${r}, ${g}, ${b}, ${a})`;
    },
    openSucker(isOpen) {
      if (isOpen) {
        // ... canvas be created
        // this.suckerCanvas = canvas
        // this.suckerArea = [x1, y1, x2, y2]
      } else {
        // this.suckerCanvas && this.suckerCanvas.remove
      }
    },
  },
};
</script>

<style>
#app {
  margin: 0 auto;
  margin-top: 200px;
  min-height: 100vh;
  width: 500px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>