Element el-color-picker 颜色选择器详解

雨点打透心脏的1/2处 2022-09-16 04:46 420阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 基本用法
 *  3. 带默认值
 *  4. 调整尺寸
 *  5. 小结

# 1. 前言 #

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

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

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

# 2. 基本用法 #

代码如下：

基本用法:{
 {value1}}
 <el-color-picker v-model="value1" @change="selectChange"></el-color-picker>

methods: {
        
        selectChange(value) {
        
          console.log(value);
        }
      }

颜色选择器绑定了value1，当选定颜色后，颜色值会自动进入value1。另外颜色变化事件绑定了selectChange，所以当颜色发生变化时，会触发该方法。效果如下：  
![在这里插入图片描述][db3b982e63fd49018196b9011da1222a.png]

# 3. 带默认值 #

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

带默认值：{
 {value2}}
 <el-color-picker v-model="value2" @change="selectChange"></el-color-picker>

value2: '#111111',

效果如下：  
![在这里插入图片描述][49aff1cecc73421fac45f6a56136e693.png]

# 4. 调整尺寸 #

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

调节尺寸： 
 默认：<el-color-picker v-model="value3"></el-color-picker> 
 medium:<el-color-picker v-model="value3" size="medium"></el-color-picker> 
 small:<el-color-picker v-model="value3" size="small"></el-color-picker> 
 mini:<el-color-picker v-model="value3" size="mini"></el-color-picker>

效果如下：  
![在这里插入图片描述][01962645df4a416cb0cfa3e5b64cbfde.png]

# 5. 小结 #

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[db3b982e63fd49018196b9011da1222a.png]: /images/20220828/8c367d1c8f9140768118313ace0de9a0.png
[49aff1cecc73421fac45f6a56136e693.png]: /images/20220828/a3db9debe33f43cbad75fd9c470a162a.png
[01962645df4a416cb0cfa3e5b64cbfde.png]: /images/20220828/94a80616f4e74504b8ec0c13c196adc1.png