1. 前言

颜色选择器，说实话比较冷门，我也没有在实际项目中用过。

仔细想了想，如果开发的网站比较高端，可以增加一个自定义主题功能，可以自定义导航栏、菜单栏的文本颜色、背景色之类的，此时就用到颜色选择器了。

本篇就来介绍下，如何使用Element的颜色选择器。

2. 基本用法

代码如下：

  基本用法:{{value1}}
    <el-color-picker v-model="value1" @change="selectChange"></el-color-picker>
  methods: {
    selectChange(value) {
      console.log(value);
    }
  }

颜色选择器绑定了value1，当选定颜色后，颜色值会自动进入value1。另外颜色变化事件绑定了selectChange，所以当颜色发生变化时，会触发该方法。效果如下：

3. 带默认值

如果绑定值为null，则无默认值。如果设定一个非null的绑定值，则默认显示到颜色选择器中。

带默认值：{{value2}}

   <el-color-picker v-model="value2" @change="selectChange"></el-color-picker>

1

2

value2: '#111111',

1

效果如下：

4. 调整尺寸

可以通过size属性调整尺寸：

  调节尺寸：<br>

   默认：<el-color-picker v-model="value3"></el-color-picker><br>

   medium:<el-color-picker v-model="value3" size="medium"></el-color-picker><br>

   small:<el-color-picker v-model="value3" size="small"></el-color-picker><br>

   mini:<el-color-picker v-model="value3" size="mini"></el-color-picker><br>

效果如下：

5. 小结

颜色选择器用的不多，但是如果要用的话，el-color-picker是一个简单又好用的选择。