vue项目中使用颜色选择器

2023-12-14 19:43| 来源: 网络整理| 查看: 265

颜色选择器引言type类型为color的input示例 elementUI中的ColorPicker组件vcolorpicker插件示例

引言

关于颜色选择器，我是用过三种，一个是HTML5新增的，一个是elementUI中的ColorPicker组件，一个是基于Vue的颜色选择器插件vcolorpicker

type类型为color的input

在旧版IE浏览器上不支持该标签。该标签的显示效果如下在这里插入图片描述

在Google Chrome和Microsoft Edge上，该标签的显示效果如下在这里插入图片描述他有三种显示颜色的方式： 1、RGB（例如：rgb(203,26,26)，如下图所示） 2、HSL（例如：hsl(0,77%,45%)，如下图所示） 3、HEX（即十六进制颜色码）（例如：#CB1A1A，如下图所示）在Firefox上，该标签的显示效果如下

在这里插入图片描述效果基本无差，但是点击打开颜色面板，我们就发现样式截然不同了对于该标签，我们来看一下他的属性

属性描述value颜色选择器默认选择的颜色，可以是十六进制颜色码，可以是RGB颜色码，可以是HSL颜色码，也可以是RGBA颜色码name和表单一起提交的颜色选择器的namedisabled颜色选择器是否不可用于交互。disabled时的值不会随表单提交。autocomplete1设置颜色区域的autocomplete值。如果为true，则将自动填充颜色选择器上次存储的值。autofocus1页面加载时自动获取焦点

与其他input标签相同，也有两个和值的改变相关的事件，input和change，可以对值进行操作

示例 export default { name: "ColorPicker", data() { return { color: '#778899' }; } }; body { font-size: 14px; line-height: 1.5; color: #515a6e; background-color: #fff; } elementUI中的ColorPicker组件

他的颜色面板显示效果如下在这里插入图片描述

elementUI文档中对ColorPicker组件的描述足够详细在这里插入图片描述 ColorPicker 颜色选择器该组件的安装使用参考安装elementUI和引用elementUI组件

但是我在使用该组件的时候发现他存在着缺陷，当我在一个页面引入多个ColorPicker组件时，就会出现颜色面板无法正常选择颜色，找度娘翻了很多博客都没有人提到这个问题，关于这点如果有小伙伴也遇到过可以在评论区参与讨论

vcolorpicker插件

官网该插件是一个基于 Vue 的颜色选择器插件，他的颜色面板显示如下在这里插入图片描述

在支持 html5 input[type=‘color’] 的浏览器实现了「更多颜色」的功能

所以点击更多颜色弹出的颜色面板参考在不同浏览器的显示效果

示例

安装

npm install vcolorpicker -S

main.js注册

import vcolorpicker from 'vcolorpicker' Vue.use(vcolorpicker)

使用

export default { name: "ColorPicker", data() { return { color: '#778899' }; }, methods: { headleChangeColor(){ console.log("颜色发生改变") //颜色改变之后相关操作... }, } }; body { font-size: 14px; line-height: 1.5; color: #515a6e; background-color: #fff; }

HTML5新增属性 ↩︎ ↩︎

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章