前言
因为需求需要一个颜色选择器,因为我使用的是vue3,我也去github搜索了,也就vue-color比较多星星,然后就选用了它。但是呢!遇到一个问题
- 它没有确定、取消按钮
- 它不是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'