使用react-color实现前端取色器的方法

2024-06-10 05:49:35

背景

我们可以通过react-color实现前端界面的取色器，效果如下图所示：

安装

npm i react-color -S

使用

import React, { Component, Fragment, createRef } from 'react';
import { Popover } from 'antd';
import { SketchPicker } from 'react-color';

type StateType = {
  subtitleColor: string;
};
type PropType = {
  [propName: string]: any;
};
interface HandleCreateVideoByHotNews {
  state: StateType;
  props: PropType;
}

class HandleCreateVideoByHotNews extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
      subtitleColor: '#FFF',
    }
  }

  // 修改字幕字体颜色
  private setSubtitleFontColor = (e: any): void => {
    console.log(e);
    this.setState({
      subtitleColor: e.hex,
    });
  }

  render() {
    const { subtitleColor } = this.state;

    return (
      <Popover
        content={<SketchPicker color={subtitleColor}
        onChange={(e) => {this.setSubtitleFontColor(e)}}
        onChangeComplete={(e) => {this.setSubtitleFontColor(e)}} />}
        trigger="click"
      >
        <div className="create-hotnews-video-popup-operate-item-titleset-item-operate font-color-set">
          <div className="font-color-set-value">{subtitleColor}</div>
          <div className="font-color-set-show" style={{backgroundColor: subtitleColor}}></div>
        </div>
      </Popover>
    )
  }
}

export default HandleCreateVideoByHotNews;

到此这篇关于使用react-color实现前端取色器的文章就介绍到这了,更多相关ct-color前端取色器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

使用react-color实现前端取色器的方法

背景我们可以通过react-color实现前端界面的取色器,效果如下图所示: 安装 npm i react-color -S 使用 import React, { Component, Fragment, createRef } from 'react'; import { Popover } from 'antd'; import { SketchPicker } from 'react-color'; type StateType = { subtitleColor: string; };
javascript编程开发中取色器及封装$函数用法示例

本文实例讲述了javascript编程开发中取色器及封装$函数用法.分享给大家供大家参考,具体如下: 1.封装$函数 function $(str){ //如果传入的是'#' 则选择id标签 //如果传入的是'.' 则选择所有的类名标签 //如果传入的既不是'#也不是'.' 选择复合标签 //判断传入的值 if(typeof str !='string'){ console.log('传入的参数有误!'); return null; } //获取参数的第一个字母 var firstChar=st
JS实现的RGB网页颜色在线取色器完整实例

本文实例讲述了JS实现的RGB网页颜色在线取色器.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta name="description" content="在线取色器"> <me
详解Python GUI工具取色器

Python 提供了多个图形开发界面的库,几个常用 Python GUI 库如下: Tkinter: Tkinter 模块(Tk 接口)是 Python 的标准 Tk GUI 工具包的接口 .Tk 和 Tkinter 可以在大多数的 Unix 平台下使用,同样可以应用在 Windows 和 Macintosh 系统里.Tk8.0 的后续版本可以实现本地窗口风格,并良好地运行在绝大多数平台中. wxPython:wxPython 是一款开源软件,是 Python 语言的一套优秀的 GUI 图形库,
Flutter实现矩形取色器的封装

前言最近看插件库上少有的取色器大都是圆形的或者奇奇怪的的亚子,所以今天做两个矩形的颜色取色器提示:以下是本篇文章正文内容,下面案例可供参考一.BarTypeColorPicker 条形选色板的功能实现,颜色的获取是通过位置来判断,然后赋予相应的颜色.这个封装好的组件可通过colorListener.onTapUpListener的回调方法,把颜色传出去. 代码如下(示例): import 'package:flutter/cupertino.dart'; import 'package:f
Flutter自定义圆盘取色器

本文实例为大家分享了Flutter自定义圆盘取色器的具体代码,供大家参考,具体内容如下下面展示一些内联代码片. 圆盘取色器效果图完整代码 import 'dart:math'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; class CircularColorFinder extends Sta
VUE 自定义取色器组件的实现

本文主要介绍了VUE 自定义取色器组件的实现,分享给大家,具体如下: 效果: 功能: 1.点击色块中任何一点,色块中的正方形显示该点的颜色. 2.点击色块上方的颜色圆点,色块选中该颜色所在的位置,并在正方形中显示相应颜色. 3.上方圆点如果不是rgb格式,需要转换. 4.组件的大小从调用它的页面中传过去. 组件代码(CanvasColor2.vue): <template>  <div id='outDiv' style=&
基于C#实现屏幕取色器的示例详解

目录实践过程效果代码实践过程效果代码 public partial class Form1 : Form { public Form1() { InitializeComponent(); } [DllImport("gdi32.dll")] static public extern uint GetPixel(IntPtr hDC, int XPos, int YPos); [DllImport("gdi32.dll")] static public
React为什么需要Scheduler调度器原理详解

目录正文我们为什么需要Scheduler(调度器) Scheduler如何进行工作总结正文最近在重学React,由于近两年没使用React突然重学发现一些很有意思的概念,首先便是React的Scheduler(调度器) 由于我对React的概念还停留在React 15之前(就是那个没有hooks的年代),所以接触Scheduler(调度器) 让我感觉很有意思: 在我印象中React的架构分为两层(React 16 之前) Reconciler(协调器)—— 负责找出变化的组件 Rend
React组件间通信的三种方法（简单易用）

目录一.父子组件通信二.跨级组件通信 1.逐层传值 2.跨级传值三.兄弟(无嵌套)组件通信四.路由传值五.Redux React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,结合实例,通俗易懂,建议收藏. 一.父子组件通信原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调事件与父组件通信. 首先,先创建一个父组件Parent.js跟子组件Children.js,二者的关系为直接父子关系. Parent.js父组件如下,给父组

使用react-color实现前端取色器的方法

背景

安装

使用

相关推荐

随机推荐