一个方便的颜色主题组件

立即下载用AI写一个

发布时间：2018-01-18

12人 | 浏览：4268次 | 收藏 |

技术：react，redux，webpack，babel，node，react-color，echarts-for-react

概述

一个方便的颜色主题组件，包含了主题的选择，以及主题色块的添加和删除，附有作者的一个 demo - 切换 ECharts 的图表主题，组件不是特别复杂，但麻雀虽小，五脏俱全，目前已有 1K 的下载量，可供想要发包的同学学习和借鉴

详细

## 演示效果
* [切换 ECharts 图表主题](https://fengshangwuqi.github.io/color-theme/demo/dist)
![](/contentImages/image/20180117/H63IYSUTVUf1AY1eTBS.png)

## 项目文件结构截图
![](/contentImages/image/20180117/I1BSQnSlYvaGJsHtqWb.png)

## 代码实现过程
- 首先，我们必须得熟练使用 `babel` 进行转译，这样我们做的东西在各大主流浏览器才能够正常使用

```javascript
{
	"scripts": {
		"build": "rimraf lib && babel src --copy-files --ignore __test__ --source-maps --extensions .js --out-dir lib"
	}
}
```

- 如果你想最终附带一个 `demo`，增加用户的满意度，那么我们就必须亲自使用 `webpack` 来打包，不然，使用 `create-react-app` 等辅助工具就行

```javascript
const config = {
  entry: {
    app: path.join(paths.demoSrc, 'app'),
  },
  output: {
    path: paths.demoDist,
  },
  module: {
    rules: [ ],
  },
  plugins,
  devServer: {},
};
```

- 现在到了最重要的书写我们的组件的环节，其实，只要看破一个颜色主题组件就是对一组拾色器的封装，这个就不会忒难，本组件使用的拾色器是 `Photoshop`

```javascript
<PhotoshopPicker
	color={pickerColor}
	header="颜色选择器"
	onAccept={this.handleAccept}
	onCancel={this.handleCancel}
	onChangeComplete={this.handleChangeComplete}
/>
````

- 剩下的就是解决一些交互问题，比如我们想要的颜色主题组件可以切换背景色，可以切换前景色，还可以同时切换，所以我们在设计的时候肯定少不了一个指定类型的 `props`，它可以取 `theme` | `color` | `bg` 以上 3 种

```javascript
class ColorTheme extends Component {
	static propTypes = {
    	type: PropTypes.string.isRequired,
	}
}
```

- 对于不同类型，颜色主题组件最终处理的方式也会有很多不同，所以，给它传入的颜色 `数据格式` 也应该是不同的，在这里，我们需要做一个 `约定`

```javascipt
// theme type
const themes = [
    {
      color: ['#D87C7C', '#919E8B', '#D7AB82', '#6E7074', '#61A0A8'],
      background: '#fff',
    },
  ];

// color type
const colors = [
    {
      color: [],
    },
  ];

// bg type
const bgs = ['#333333', '#293441', '#5B5C6E', '#fff'];
```

- 再比如我们点击某个色块可以切换它的背景，还可以表示在删除色块时实现选中或取消选中，所以，我们最小的 `component` 就是这么一个色块，`bg` 要和 `color` 跟 `theme` 单独 `区分开`

```
# BackgroundItem
处理 bg 类型的最小 component，对应一个色块，绑定的有处理颜色改变的事件

# ColorItem
处理 color 类型或 theme 类型的最小 component，绑定的有处理删除色块时是否选中的事件

# ColorThemeItem
处理一组 color 类型或 theme 类型的最小 component，绑定的有处理颜色改变，处理色块新增和删除的事件
```

- 删除色块的交互可以说是比较复杂的，外加组件最小 `component` 本身就很小， 如果稍不注意，就极易造成整个应用程序 `重复渲染` 或者 `渲染异常` 等系列问题，所以，阻止 `事件冒泡` 和添加 `redux` 是有必要的

```javascript
//  当第二次点击同一套主题时，不触发处理颜色改变的事件，不会重新渲染
handleDelete = e => {
    const { id } = this.props;
    const { index } = colorTheme.toJS();

if (id === index) {
      e.stopPropagation();
    }
  };

// 阻止事件冒泡不止以上一处
```

![](/contentImages/image/20180117/nQmGW94Y2kqx0OYqhE7.png)

- 对于有强迫症和自我要求比较高的开发者，还可以研究一下怎么添加 `代码校验`，`持续集成`，如何自动生成 `changelog`，如何在提交时检验我们的 `commit` 信息，如何书写优美的 `README.md` 等内容

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

一个方便的颜色主题组件

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子