颜色选择器 ColorInput

基于Element的el-color-picker组件二次封装

基础用法

basic.vue

<template>
  <dk-color-input v-model="color"></dk-color-input>
  <p><b>普通色：</b>{{ color }}</p>
  <dk-color-input
    v-model="transparent"
    show-alpha
    color-format="rgb"
  ></dk-color-input>
  <p><b>透明色：</b>{{ transparent }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref('#f00')
const transparent = ref('rgba(0, 0, 0, 0.25)')
</script>

组件配置

ColorInput Props

属性

属性	说明	类型	默认值
type	参数类型	string	-
showAlpha	是否显示透明度滑块	Boolean	false
placeholder	输入框占位符	string	''
colorFormat	颜色格式，可选值为 'hsl', 'hsv', 'hex', 'rgb'。 当 showAlpha 为 false 时，默认为 'hex'；当 showAlpha 为 true 时，默认为 'rgb'	string	'hex'
teleported	是否将组件挂载到 body 上	Boolean	true