怎么使element-ui中ColorPicker 颜色选择器slider横向展示
时间: 2023-10-30 15:07:22 浏览: 42
可以通过设置 ColorPicker 的 `color-format` 属性为 `hsl` 或 `hsv`,然后在 `popper-class` 中添加自定义样式来实现 ColorPicker 的 slider 横向展示。
示例代码:
```html
<template>
<div>
<el-color-picker
v-model="color"
color-format="hsl"
popper-class="color-picker-slider-horizontal"
></el-color-picker>
</div>
</template>
<style>
.color-picker-slider-horizontal .el-color-picker__panel {
display: flex;
flex-direction: row;
}
.color-picker-slider-horizontal .el-color-picker__hue-slider {
height: 20px;
width: 200px;
}
.color-picker-slider-horizontal .el-color-picker__alpha-slider {
height: 20px;
width: 200px;
}
.color-picker-slider-horizontal .el-color-picker__thumb {
height: 20px;
width: 20px;
}
</style>
```
在上面的代码中,我们将 ColorPicker 的 `color-format` 属性设置为 `hsl`,然后在 `popper-class` 中添加了一个自定义类名 `color-picker-slider-horizontal`。接着,我们在样式中设置了 `flex-direction: row`,让 slider 横向展示。最后,我们通过设置 `height` 和 `width`,以及调整 `thumb` 的大小,使 slider 展示得更加美观。
注意:如果你想使用 `hsv` 格式,需要将样式中的 `el-color-picker__hue-slider` 和 `el-color-picker__alpha-slider` 改为 `el-color-picker__saturation-slider` 和 `el-color-picker__value-slider`。