019_ColorPicker颜色选择器

原创已于 2022-02-22 13:09:41 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #elementui

于 2022-02-16 10:37:16 首次发布

element-ui 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了Vue Element UI库中的ColorPicker颜色选择器组件，包括其属性、事件和使用示例。内容涵盖了颜色选择器的禁用、尺寸、透明度支持、颜色格式及预定义颜色等功能，并提供了基础用法、透明度选择、预定义颜色设置以及不同尺寸展示的代码示例。

1. ColorPicker颜色选择器

1.1. 用于颜色选择, 支持多种格式。

1.2. 颜色选择器属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string	无	无
disabled	是否禁用	boolean	无	false
size	尺寸	string	medium / small / mini	无
show-alpha	是否支持透明度选择	boolean	无	false
color-format	写入v-model的颜色的格式	string	hsl / hsv / hex / rgb	hex(show-alpha为false) / rgb(show-alpha为true)
popper-class	ColorPicker下拉框的类名	string	无	无
predefine	预定义颜色	array	无	无

1.3. 颜色选择器事件

方法名	说明	回调参数
change	当绑定值变化时触发	当前值
active-change	面板中当前显示的颜色发生改变时触发	当前显示的颜色值

2. ColorPicker颜色选择器例子

2.1. 使用脚手架新建一个名为element-ui-colorpicker的前端项目, 同时安装Element插件。

2.2. 编写App.vue

<template>
  <div id="app">
    <h1>基础用法</h1>
    <div class="block">
      <span>有默认值: </span>
      <el-color-picker v-model="color11"></el-color-picker>
    </div>
    <div class="block">
      <span>无默认值: </span>
      <el-color-picker v-model="color12"></el-color-picker>
    </div>

    <h1>选择透明度</h1>
    <el-color-picker v-model="color2" show-alpha></el-color-picker>

    <h1>预定义颜色</h1>
    <el-color-picker v-model="color3" show-alpha :predefine="predefineColors"></el-color-picker>

    <h1>不同尺寸</h1>
    <el-color-picker v-model="color4"></el-color-picker>
    <el-color-picker v-model="color4" size="medium"></el-color-picker>
    <el-color-picker v-model="color4" size="small"></el-color-picker>
    <el-color-picker v-model="color4" size="mini"></el-color-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color11: '#409EFF',
      color12: null,
      color2: 'rgba(19, 206, 102, 0.8)',
      color3: 'rgba(255, 69, 0, 0.68)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      color4: '#409EFF'
    }
  }
}
</script>

2.3. 运行项目