一个方便的颜色主题组件

代码地址如下：
http://www.demodashi.com/demo/12376.html

演示效果

切换 ECharts 图表主题

项目文件结构截图

代码实现过程

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

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

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

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

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

<PhotoshopPickercolor={pickerColor}header="颜色选择器"onAccept={this.handleAccept}onCancel={this.handleCancel}onChangeComplete={this.handleChangeComplete}
/>
````- 剩下的就是解决一些交互问题，比如我们想要的颜色主题组件可以切换背景色，可以切换前景色，还可以同时切换，所以我们在设计的时候肯定少不了一个指定类型的 `props`，它可以取 `theme` | `color` | `bg` 以上 3 种<div class="se-preview-section-delimiter"></div>```javascript
class ColorTheme extends Component {static propTypes = {type: PropTypes.string.isRequired,}
}

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

// 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 是有必要的

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

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

代码地址如下：
http://www.demodashi.com/demo/12376.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

一个方便的颜色主题组件相关推荐

为MobaXterm终端配一个自己喜欢的主题和背景颜色
软件描述 MobaXterm是一款增强型远程连接工具,它向Windows桌面提供所有重要的远程网络工具(SSH,X11,RDP,VNC,FTP,MOSH等)和Unix命令(bash,ls,cat,se ...
wordpress:主题-一个完整的WP主题通常包含以下模板文件
zh-cn:主题 Languages:English • Español • Français • Italiano • 日本語 • 한국어 • ລາວ • myanmar • Nederlands ...
打造 Material 颜色主题 | 实现篇
作者 / Nick Rout, Material Developer Advocate 使用 Material 主题自定义 Material 组件,目的是让组件观感与品牌保持一致.Material 主 ...
打造 Material 颜色主题 | 设计篇
作者 / Liam Spradlin, Material Design Advocate 颜色是设计中最清晰的表现形式之一,尤其是当您需要在人们的各种活动场合中传播您的品牌或产品形象时.应用的界面可容 ...
分享给你一个酷炫的前端组件库，还不用起来？
fancy-components 一个酷炫的前端组件库大伙前端都是用什么组件库的呢? 我最近刚发现前端一个很好看.很炫酷的组件库.那就是fancy-components ,简直是"酷炫&q ...
为您的Blogger博客设计一个美丽的新主题
Would you like to give your Blogger blog a fresh coat of paint with a new theme? Here's how you can ...
如何封装并发布一个属于自己的ui组件库
以前就一直有个想法自己能不能封装一个类似于elementui一样的组件库,然后发布到npm上去,毕竟前端说白了,将组件v上去,然后进行数据交互.借助这次端午,终于有机会,尝试自己去封装发布组件库了我 ...
在一个热图中使用多个颜色主题
有一些用户希望在一个热图中使用多个颜色主题,可能是为了突出组间的差异.如果组与组(例如不同的列)也在热图上分隔出来(比如使用column split),那么每个组可以创建为单独的热图,然后将这些列表拼 ...
造个轮子，动手实现一个复杂场景的表格组件(UniApp)
造个轮子,动手实现一个复杂场景的表格组件(UniApp) 是一个成熟的程序猿了,要懂得自己造轮子(uniApp的插件市场找了一遍都没发现符合需求的插件,没有办法了,只能自己动手造个轮子).本文旨在复盘 ...

一个方便的颜色主题组件

演示效果

项目文件结构截图

代码实现过程

一个方便的颜色主题组件相关推荐

最新文章

热门文章