bootstrap-colorpicker颜色选择

光年V5中使用的该插件的v3.4.0版本。

github地址：https://github.com/itsjavi/bootstrap-colorpicker/

官方文档地址：https://itsjavi.com/bootstrap-colorpicker/

初始化代码在 `main.min.js` 里面。
```javascript
// 颜色选取
	jQuery('.js-colorpicker').each(function() {
		var $colorpicker = jQuery(this);
		$colorpicker.colorpicker({
			'format': $colorpicker.data('colorpicker-mode') ? $colorpicker.data('colorpicker-mode') : 'auto',
            'horizontal' : $colorpicker.data('colorpicker-horizontal') ? $colorpicker.data('colorpicker-horizontal') : false
		});
	});
```

从上面的代码可以看到，在我们使用的时候，只需要给对应的 `input` 增加一个 `js-colorpicker` 的 `class` 即可。

![](/uploads/images/20230107/cf81a8b17c811a507cda7590864f6607.png)

```html
<input type="text" class="form-control js-colorpicker" name="example-color1" placeholder="点击选择颜色" value="" />
```

也可以使用 `input-group` 的布局，将选择器的点击操作绑定到后面。

![](/uploads/images/20230107/c52d164965c71106949b5425fccbbd36.png)

```html
<div class="input-group js-colorpicker mb-3">
  <input type="text" class="form-control" name="example-color3" data-color="rgb(21, 195, 119)" />
  <span class="input-group-text colorpicker-input-addon"><i></i></span>
</div>
```

其他具体的其他用法，可以直接去查看官方的文档，或者查看模板页面的介绍：http://lyear.itshubao.com/v5/lyear_js_colorpicker.html

涉及的文件：
- `lyear_js_colorpicker.html`
- `js/bootstrap-colorpicker/bootstrap-colorpicker.min.css`
- `js/bootstrap-colorpicker/bootstrap-colorpicker.min.js`