vue3颜色选择器

前言

因为需求需要一个颜色选择器，因为我使用的是vue3，我也去github搜索了，也就vue-color比较多星星，然后就选用了它。但是呢！遇到一个问题

1. 它没有确定、取消按钮
2. 它不是vue3版本

然后就在issues里面找了一个vue3版本重写的，然后在基于它我在进行二开得到下面的结果

开始

安装依赖

npm i @ans1998/vue3-color

代码使用

<div>
  <h2>Sketch</h2>
  <div style="width: 40px; height: 40px; cursor: pointer" :style="{backgroundColor: sketchBgColor}" @click="changSketch"></div>
  <Sketch v-model="colors" :show="showSketch" @changButton="changSketchButton"></Sketch>
</div>

import { Sketch } from '@ans1998/vue3-color'

/** 
let item = {
    isOk: true,
    activeColor: '',
    hex: ''
}
*/
components: {
  Sketch
}

data () {
  return {
    colors: "",
    sketchBgColor: "#222",
    showSketch: true
  }
}

changSketchButton (item) {
  this.showSketch = false
  console.log(item)
  if (item.isOk) {
    console.log('确定')
    this.sketchBgColor = item.activeColor
  } else {
    console.log('取消')
  }
}

ts使用

shims-vue.d.ts

/* eslint-disable */
declare module '*.vue' {
  import type, { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare module '@ans1998/vue3-color'