安装:
npm install vue-color
项目(xxx.vue)中引入
代码:
<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,
Twitter,
Grayscale
} from "vue-color";
export default {
components: {
"material-picker": Material,
"compact-picker": Compact,
"swatches-picker": Swatches,
"slider-picker": Slider,
"photoshop-picker": Photoshop,
"chrome-picker": Chrome,
"sketch-picker": Sketch,
"twitter-picker": Twitter,
"grayscale-picker": Grayscale
},
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
}
};
},
mounted() {},
methods: {
/* 颜色选择器 */
updateValue(value) {
console.log(value);
console.log(this.color);
}
}
};
</script>
<style lang="less" scoped>
.color {
display: flex;
flex-wrap: wrap;
text-align: center;
div {
margin: 20px;
font-size: 18px;
font-weight: bold;
border: 1px solid #eee;
padding: 10px;
}
}
</style>
参考图片:
参考链接:
npm-vue-colora链接