ColorPicker 颜色选择器

基础用法

<template>
  <plv-color-picker v-model="color" />
</template>

<script>
  export default {
    data() {
      return {
        color: '#000000'
      };
    }
  };
</script>

显示代码

设置透明度

<template>
  <plv-color-picker v-model="color" show-alpha />
</template>

<script>
  export default {
    data() {
      return {
        color: '#000000'
      };
    }
  };
</script>

显示代码

预定义颜色

<template>
  <plv-color-picker
    v-model="color"
    show-alpha
    :predefine="predefine" />
</template>

<script>
  export default {
    data() {
      return {
        color: '#000000',
        predefine: [
          '#000000', 'rgba(0, 0, 0, .4)', '#D9D9D9', '#FFFFFF', '#FF4D4F', '#FA8C16'
        ]
      };
    }
  };
</script>

显示代码

禁用状态

<template>
  <plv-color-picker v-model="color" disabled />
</template>

<script>
  export default {
    data() {
      return {
        color: '#000000'
      };
    }
  };
</script>

显示代码

颜色格子

<template>
  <div>
    <plv-color-cell color="#000000"></plv-color-cell>
    <plv-color-cell color="#5A5A5A"></plv-color-cell>
    <plv-color-cell color="#D9D9D9"></plv-color-cell>
    <plv-color-cell color="#FFFFFF"></plv-color-cell>
    <plv-color-cell color="#FF4D4F"></plv-color-cell>
    <plv-color-cell color="rgba(0, 0, 0, 0.5)"></plv-color-cell>
  </div>
</template>

显示代码

ColorPicker Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	String	-	-
placeholder	占位符	String	-	请选择
size	尺寸	String	medium small mini	-
disabled	是否禁用	Boolean	-	false
readonly	是否只读	Boolean	-	false
showAlpha	是否显示透明度选择	Boolean	-	false
colorFormat	颜色格式	String	hsl hsv rgb hex	hex
predefine	预定义颜色，为false则不显示	Array Boolean	-	['#000000', '#5A5A5A', '#D9D9D9', '#FFFFFF', '#FF4D4F', '#FA8C16', '#FFEC3D', '#BAE637', '#36CFC9', '#1890FF', '#597EF7', '#9254DE']
showCustomPicker	是否显示自定义颜色	Boolean	-	true
defaultPickerShow	自定义拾取器默认是否显示	Boolean	-	false
customTitle	自定义颜色标题	String	-	自定义颜色
cellBorderL	在颜色hsl模式下的l高于某个值时显示边框	Number	0 ~ 1	0.96

ColorPicker Events

事件名称	说明	回调参数
change	颜色值发生变化时触发	当前颜色值
visibleChange	选择器出现/隐藏时触发	出现则为 true，隐藏则为 false

ColorCell Attributes

参数	说明	类型	可选值	默认值
color	颜色值	String	-	-
cellBorderL	在颜色hsl模式下的l高于某个值时显示边框	Number	0 ~ 1	0.96