vue-color 取色器的用法研究

来源:csdn博客分类: 文章浏览史发布时间:2020-08-16 19:58:58 最后更新:2020-08-16 浏览:3387

转载声明：

本文为摘录自“csdn博客”，版权归原作者所有。

原文链接:

https://blog.csdn.net/qq_39343308/article/details/89097...

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-08-16 19:58:58

github：https://github.com/xiaokaike/vue-color

今天项目中引用了一下vue-color,大概步骤如下

1、安装vue-color

$ npm install vue-color

2、安装所需依赖

npm install

3、引入项目

import { Photoshop } from 'vue-color'//有6中风格，用哪种直接引用对应的名字就行

new Vue({
  components: {
    'photoshop-picker': Photoshop
  }
})

4、配置组件

components: {
     'sketch-picker': Sketch,
  },

5、data中引入colors

data() {
    return {
      colors: {
  hex: '#194d33',
  hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
  hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
  rgba: { r: 25, g: 77, b: 51, a: 1 },
  a: 1
},

6、使用组件

  <sketch-picker v-model="colors"></sketch-picker>