vue-color 取色器的用法研究

来源:csdn博客 分类: 文章浏览史 发布时间:2020-08-16 19:58:58 最后更新:2020-08-16 浏览:188
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
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>

 

php技术微信