layui/docs/colorpicker/index.md

title, toc

title	toc
颜色选择器 colorpicker	true

颜色选择器

颜色选择器 colorpicker 用于对颜色的快捷选择，支持 hex,rgb,rgba 三种颜色类型。

示例

{{- d.include("/colorpicker/detail/demo.md") }}

API

API	描述
var colorpicker = layui.colorpicker	获得 colorpicker 模块。
基础接口 2.13+	该组件由 component 构建，因此继承其提供的基础接口。
colorpicker.render(options)	colorpicker 组件渲染，核心方法。

渲染

colorpicker.render(options);

• 参数 options : 基础属性选项。#详见属性
  注 ^2.7+ : 除 elem 属性外，其他基础属性也可以直接写在元素的 lay-options="{}" 属性中。

<div id="ID-test-colorpicker"></div>
<div class="class-test-colorpicker" lay-options="{color: '#333'}"></div>
<div class="class-test-colorpicker" lay-options="{color: '#777'}"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var colorpicker = layui.colorpicker;
  // 单个渲染
  colorpicker.render({
    elem: '#ID-test-colorpicker'
  });
  // 批量渲染
  colorpicker.render({
    elem: '.class-test-colorpicker'
  });
});
</script>

属性

{{- d.include("/colorpicker/detail/options.md") }}

兼容性

colorpicker 组件支持 Chrome,Edge,Firefox 等所有高级浏览器，不支持 IE10 低版本浏览器。