ColorPickerPanel 颜色选择器面板 beta ​

ColorPickerPanel 是 ColorPicker 的核心组件，可以单独使用，将颜色选择器直接嵌入到页面中。

ts
import { createApp } from 'vue'
import { ColorPickerPanel as ElColorPickerPanel } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElColorPickerPanel)

基础用法 ​

<template>
  <el-color-picker-panel v-model="color" />
  <div class="demo-panel-value">当前值：{{ color }}</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ColorPickerPanel as ElColorPickerPanel } from '@szhn/dh-design-pc'


const color = ref('#409EFF')
</script>

<style scoped>
.demo-panel-value {
  margin-top: 12px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

边框 ​

默认情况下，边框是默认的，如果你不想要边框请设置 border 为 false。

<template>
  <el-color-picker-panel v-model="color" :border="false" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ColorPickerPanel as ElColorPickerPanel } from '@szhn/dh-design-pc'


const color = ref('#ff6900')
</script>

选择透明度 ​

使用 show-alpha 开启透明度选择。

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

<script lang="ts" setup>
import { ref } from 'vue'
import { ColorPickerPanel as ElColorPickerPanel } from '@szhn/dh-design-pc'


const color = ref('rgba(255, 69, 0, 0.68)')
</script>

预定义颜色 ​

通过 predefine 设置预定义颜色。

<template>
  <el-color-picker-panel
    v-model="color"
    show-alpha
    :predefine="predefineColors"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ColorPickerPanel as ElColorPickerPanel } from '@szhn/dh-design-pc'


const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#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',
])
</script>

API ​

Attributes ​

属性名说明类型默认值
model-value / v-model选中项绑定值string—
border是否显示边框booleantrue
show-alpha是否支持透明度选择booleanfalse
color-format写入 v-model 的颜色格式'hex' | 'rgb' | 'hsl' | 'hsv'—
disabled是否禁用booleanfalse
predefine预定义颜色string[]—
validate-event输入时是否触发表单的校验booleantrue
hue-slider-class色相滑块的自定义类名string / array / object—
hue-slider-style色相滑块的自定义样式string / array / object—

Events ​

事件名说明类型
update:modelValue当绑定值变化时触发Function

Exposes ​

名称说明类型
color当前色彩对象object
inputRef输入框的 refobject