原生js实现拾色器插件

codeGoogle 发布于2019-08-22 15:17 / 1715人阅读

摘要：拾色器将会分别绑定每个元素。会回传两个参数，第一个就是该拾色器生成时绑定的第二个参数，代表是回传的颜色值。起初是插件直接改变绑定元素的颜色，但是想到有些拾色器插件是绑定表单，改变表单颜色值，有些是改变绑定元素的颜色。

原生js实现拾色器插件 前言

插件功能只满足我司业务需求，如果希望有更多功能的，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我github来个star ?

仓库地址

在线预览

预览

准备

首先在页面中引入js文件

在页面中写上如下代码:

Colorpicker.create({
    bindClass:"picker", // 这里的picker可随意填 不需要跟我一样
    change: function(elem,hex){
      // elem: 绑定的元素
      // hex：当前选中颜色的hex值

      elem.style.backgroundColor = hex;
    }
})

bindClass:参数填入你要绑定拾色器的元素，页面中class为picker有几个，拾色器将会生成几个。拾色器将会分别绑定每个元素。点击每个元素时，都会自动打开该元素绑定的拾色器。

change:在选择的色彩改变的时候会触发该回调方法。会回传两个参数，第一个elem就是该拾色器生成时绑定的picker;第二个参数，hex代表是回传的颜色值。起初是插件直接改变绑定元素的颜色，但是想到有些拾色器插件是绑定input表单，改变表单颜色值，有些是改变绑定元素的颜色。所以为了让使用者自由度更高点，暂提供两个回调参数让你自定义。如上面我是直接改变元素颜色。

如果需要更多回调方法，我会尽量扩展

结尾

如有什么功能需要增加的，可在评论区留言，我尽量满足。如有什么疏忽或错误，希望您指出。我会尽早修改，以免误导他人。

云服务器 GPU云服务器拾色器原生js弹窗插件原生js实现 ajax原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93336.html

we-color-picker 微信小程序拾色器（颜色选择器）组件

摘要：最近一直在搞小程序，由于刚需一个拾色器，搜了半天也没见人做过，就自己动手撸了一个，还在不断地改进优化中。。。最近一直在搞小程序，由于刚需一个拾色器，搜了半天也没见人做过，就自己动手撸了一个，还在不断地改进优化中。。。项目地址 https://github.com/KirisakiAr... 查看DEMO showImg(https://i.loli.net/2019/01/02/...

tainzhi 2019-08-23 14:28 评论0 收藏0
前端开发VScode常用插件

摘要：名称功能自动闭合标签自动提示修改标签时，自动修改匹配的标签格式化编写更加人性化的注释添加行书签的浏览器兼容性检查运行选中代码段支持大量语言，包括单词拼写检查在中弹出浏览器并搜索，可编辑搜索引擎颜色值在代码中高亮显示小窗口显示颜色值，等等拾色名称功能 Auto Close Tag 自动闭合HTML标签 Auto Import...

hellowoody 2019-08-21 18:21 评论0 收藏0
前端复习笔记--1.html标签复习速查

摘要：可读性，提高代码的可读性，便于多人的修改维护，提高开发效率。主流浏览器都兼容的新标签，对于及以下版本不认识的新元素，可以使用创建一个没用的元素来解决，例如，也可以使用来解决兼容性问题，详情可参考概览 showImg(https://segmentfault.com/img/bV5JXT?w=1880&h=1050); 文档章节导航表示和主要内容不相关的区域表示一个独...

番茄西红柿 2019-08-01 18:42 评论0 收藏0
前端工具【3】—— 图片处理

摘要：切图主要是用的工具就是等等，除此之外，在开发过程中我们也会用到其他工具，以下介绍一些有关于图片处理的操作。是打开文件捕捉活动窗口捕获窗口捕获矩形区域，可自行截图。新版的比之前那些版本增加了一键导出功能，这个功能很大程度方便了我们拆分图片。在写页面之前，很重要的一个技能是切图，根据UI设计的设计图，在了解页面结构和操作后进行分割，取出自己在开发过程中是用到的图片资源。切图主要是用的工具...

MobService 2019-08-02 16:05 评论0 收藏0