这里借助Vue.js 提供的颜色选择器组件库vue-color
首先安装这个库
npm install vue-color
具体使用方法如下
<template>
<div class="color">
<div>
1.material
<material-picker v-model="colors" />
</div>
<div>
2.compact
<compact-picker v-model="colors" />
</div>
<div>
3.swatches
<swatches-picker v-model="colors" />
</div>
<div>
4.slider
<slider-picker v-model="colors" />
</div>
<div>
5.sketch
<sketch-picker v-model="colors" />
</div>
<div>
6.chrome
<chrome-picker v-model="colors" />
</div>
<div>
7.photoshop
<photoshop-picker v-model="colors" />
</div>
</div>
</template>
<script>
import {
Material,
Compact,
Swatches,
Slider,
Photoshop,
Chrome,
Sketch,
} from "vue-color";
export default {
name: "TestComponent",
components: {
"material-picker": Material,
"compact-picker": Compact,
"swatches-picker": Swatches,
"slider-picker": Slider,
"photoshop-picker": Photoshop,
"chrome-picker": Chrome,
"sketch-picker": Sketch,
},
data() {
return {
colors: {
color: "",
hex: "#194d33",
hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
rgba: { r: 25, g: 77, b: 51, a: 1 },
a: 1,
},
};
},
methods: {
updateValue(value) {
console.log(value);
},
},
};
</script>
标签:picker,Compact,vue,photoshop,color,前端,选择器,页面
From: https://blog.csdn.net/qq_45937484/article/details/141848679