引言

关于颜色选择器，我是用过三种，一个是HTML5新增的<input type="color">，一个是elementUI中的ColorPicker组件，一个是基于Vue的颜色选择器插件vcolorpicker

type类型为color的input

<input type="color">

在旧版IE浏览器上不支持该标签。该标签的显示效果如下

在Google Chrome和Microsoft Edge上，该标签的显示效果如下

他有三种显示颜色的方式：
1、RGB（例如：rgb(203,26,26)，如下图所示）

2、HSL（例如：hsl(0,77%,45%)，如下图所示）

3、HEX（即十六进制颜色码）（例如：#CB1A1A，如下图所示）

在Firefox上，该标签的显示效果如下

效果基本无差，但是点击打开颜色面板，我们就发现样式截然不同了

对于该标签，我们来看一下他的属性

属性	描述
value	颜色选择器默认选择的颜色，可以是十六进制颜色码，可以是RGB颜色码，可以是HSL颜色码，也可以是RGBA颜色码
name	和表单一起提交的颜色选择器的name
disabled	颜色选择器是否不可用于交互。disabled时的值不会随表单提交。
autocomplete1	设置颜色区域的autocomplete值。如果为true，则将自动填充颜色选择器上次存储的值。
autofocus1	页面加载时自动获取焦点

与其他input标签相同，<input type="color">也有两个和值的改变相关的事件，input和change，可以对值进行操作

示例

<template>
  <div id="colorPicker">
    <input type="color" v-model="color">
  </div>
</template>
<script>
export default {
  name: "ColorPicker",
  data() {
    return {
      color: '#778899'
    };
  }
};
</script>
<style>
body {
  font-size: 14px;
  line-height: 1.5;
  color: #515a6e;
  background-color: #fff;
}
</style>

elementUI中的ColorPicker组件

他的颜色面板显示效果如下

elementUI文档中对ColorPicker组件的描述足够详细
ColorPicker 颜色选择器
该组件的安装使用参考
安装elementUI和引用elementUI组件

但是我在使用该组件的时候发现他存在着缺陷，当我在一个页面引入多个ColorPicker组件时，就会出现颜色面板无法正常选择颜色，找度娘翻了很多博客都没有人提到这个问题，关于这点如果有小伙伴也遇到过可以在评论区参与讨论

vcolorpicker插件

官网
该插件是一个基于 Vue 的颜色选择器插件，他的颜色面板显示如下

在支持 html5 input[type=‘color’] 的浏览器实现了「更多颜色」的功能

所以点击更多颜色弹出的颜色面板参考<input type="color">在不同浏览器的显示效果

示例

安装

npm install vcolorpicker -S

main.js注册

import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker)

使用

<template>
  <div id="colorPicker">
    <colorPicker class="color-picker" v-model="color"  v-on:change="headleChangeColor" />
  </div>
</template>
<script>
export default {
  name: "ColorPicker",
  data() {
    return {
      color: '#778899'
    };
  },
  methods: {
    headleChangeColor(){
	  console.log("颜色发生改变")
	  //颜色改变之后相关操作...
    },
  }
};
</script>
<style>
body {
  font-size: 14px;
  line-height: 1.5;
  color: #515a6e;
  background-color: #fff;
}
</style>

---

1. HTML5新增属性 ↩︎ ↩︎