zoukankan      html  css  js  c++  java
  • 一个方便的颜色主题组件

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

    演示效果

    项目文件结构截图

    代码实现过程

    • 首先,我们必须得熟练使用 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
    <PhotoshopPicker
    	color={pickerColor}
    	header="颜色选择器"
    	onAccept={this.handleAccept}
    	onCancel={this.handleCancel}
    	onChangeComplete={this.handleChangeComplete}
    />
    
    • 剩下的就是解决一些交互问题,比如我们想要的颜色主题组件可以切换背景色,可以切换前景色,还可以同时切换,所以我们在设计的时候肯定少不了一个指定类型的 props,它可以取 theme | color | bg 以上 3 种
    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 要和 colortheme 单独 区分开
    # 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大师代发,拒绝转载,转载需要作者授权

  • 相关阅读:
    【k8s】pv 处在 Terminating 状态
    【k8s】命令行自动补全
    【k8s】允许 master 节点运行 pod
    【k8s】Harbor 安装
    Nginx 允许 frame 嵌套
    Python基础教程:json中load和loads区别
    Python 基础教程:用户交互语句
    Python正则表达式-常用函数的基本使用
    Python字典循环与字典排序
    4道Python文件操作和函数练习题
  • 原文地址:https://www.cnblogs.com/demodashi/p/8512698.html
Copyright © 2011-2022 走看看