element-ui ColorPicker 可外部输入进行修改

最新推荐文章于 2024-06-11 08:08:31 发布

一块钢

最新推荐文章于 2024-06-11 08:08:31 发布

阅读量843

点赞数 1

分类专栏： element-ui vue 文章标签： web elementui vue color

本文链接：https://blog.csdn.net/u012724239/article/details/118382241

版权

本文介绍了如何在使用Element UI的颜色选择器组件时，支持外部输入框修改颜色值，并确保输入的有效性。通过分析Element UI的源码，发现了Color对象的特性，当输入非法颜色时，Color会返回红色的rgb值。利用这一特性，可以封装一个颜色校验方法，以确保用户输入的颜色值正确。

摘要由CSDN通过智能技术生成

在这里插入图片描述

今天遇到一个需求，用 element的颜色选择器同时，需要支持外部输入框进行修改

问题：外部输入后，如何确保其输入的有效性？

思考：用户可能乱输入，并且可能输入rgb、hex等等类型的颜色，正则等肯定是不行的

过程：查看其源码，发现elemetn中有封装Color对象，经过阅读和尝试，找到了一个可行的方案。
在这里插入图片描述

其Color类的特性为，输入非法颜色时，会输出为红色的值rgb(255,0,0,1)，那我们可以借用这个特性封装一个颜色校验方法。

源码：

import Color from "element-plus/packages/color-picker/src/color"

/**
 * 检验是否为颜色
 * @param colorStr 颜色
 * @param opacity 透明度
 *

关注