bootstrap-colorpicker颜色选择

v3模板中使用Bootstrap Colorpicker v2.3.3，v4中使用v3.2.0版本。

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

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

v3和v4的初始化代码没有太大的差别，这里分别列一下：
```javascript
// v3
jQuery('.js-colorpicker').each(function() {
	var $colorpicker = jQuery(this);
	var $colorpickerMode = $colorpicker.data('colorpicker-mode') ? $colorpicker.data('colorpicker-mode') : 'hex';
	var $colorpickerinline = $colorpicker.data('colorpicker-inline') ? true: false;
	$colorpicker.colorpicker({
		'format': $colorpickerMode,
		'inline': $colorpickerinline
	});
});
// v4
jQuery('.js-colorpicker').each(function() {
	var $colorpicker = jQuery(this);
	var $colorpickerMode = $colorpicker.data('colorpicker-mode') ? $colorpicker.data('colorpicker-mode') : 'auto';
	$colorpicker.colorpicker({
		'format': $colorpickerMode,
	});
});
```
从上面的代码可以看到，在我们使用的时候，只需要给对应的 `input` 增加一个 `js-colorpicker` 的 `class` 即可，而v3相比较v4多了一个 `inline` 的设置参数，如果你需要的话，也可以在v4中增加。
![](/uploads/images/20211229/7e18c53cb7163b4c64ba749878eaeaa6.png)

```html
<input type="text" class="form-control js-colorpicker" name="example-color1" placeholder="点击选择颜色" value="" />
```
可以使用 `input-group` 的布局，将选择器的点击操作绑定到后面。
![](/uploads/images/20211229/08ce4d0a31a730d21b399c0e1d062e0d.png)

```html
<div class="input-group js-colorpicker">
  <input type="text" class="form-control" name="example-color2" value="#33cabb" />
  <div class="input-group-append">
    <span class="input-group-text colorpicker-input-addon"><i></i></span>
  </div>
</div>
```
设置属性 `data-colorpicker-mode='rgb'`，可以看到，在选择颜色后的值是 rgb 或者 rgba 格式的。
![](/uploads/images/20211229/cf8890d938ece5907b3393a5fbb92573.png)

```html
<input type="text" class="form-control js-colorpicker" name="example-color3" placeholder="点击选择颜色" value="" data-colorpicker-mode='rgb'>
```

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