当前位置: 首页 > news >正文

vue3 选择字体的颜色,使用vue3-colorpicker来选择颜色

1、有的时候我们会用到颜色的选择器,像element-plus提供了,但是ant-design-vue并没有:

这个暂时没有看到:

但是Ant Design 5的版本有,应该不是vue的。

2、使用第三方提供的vue3-colorpicker:@storybook/cli - Storybook    GitHub - haixin-fang/vue3-colorpicker: 基于vue3实现的颜色选择器 , 支持线性渐变和经向渐变. very beautiful color picker, supports input and output of multiple color formats, and supports gradient color selection.

3、安装并使用:

这里只是局部的使用:

import { ColorPicker } from 'vue3-colorpicker';import 'vue3-colorpicker/style.css';
<ColorPickerv-model:pureColor="fontcolor"placeholder="字体颜色"style="width: 100%"size="small"/>
官方的事例:
<color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor" v-model="gradientData"/>

4、显示效果:

效果还不错,也有其它的比如 colorpicker-vue3,这个2年前维护的。有兴趣也可以看看。

还有  Vite AppGitHub - zuley/vue-color-picker: Vue 颜色选择器插件  Vite App

相关文章:

vue3 选择字体的颜色,使用vue3-colorpicker来选择颜色

1、有的时候我们会用到颜色的选择器&#xff0c;像element-plus提供了&#xff0c;但是ant-design-vue并没有&#xff1a; 这个暂时没有看到&#xff1a; 但是Ant Design 5的版本有&#xff0c;应该不是vue的。 2、使用第三方提供的vue3-colorpicker&#xff1a;storybook/cli…...

windows C++ 并行编程-使用消息块筛选器

本文档演示了如何使用筛选器函数&#xff0c;使异步消息块能够根据消息的有效负载接受或拒绝消息。 创建消息块对象(例如 concurrency::unbounded_buffer、concurrency::call 或 concurrency::transformer)时&#xff0c;可以提供筛选器函数&#xff0c;用于确定消息块是接受还…...

【mysql技术内幕】

MySQL之技术内幕 1.MVCC模式2. 实现mvcc模式的基础点3.MySQL锁的类型4. 说下MySQL的索引有哪些吧&#xff1f;5. 谈谈分库分表6. 分表后的id咋么保证唯一性呢&#xff1f;7. 分表后非sharding key的查询咋么处理的&#xff1f; 1.MVCC模式 MVCC, 是multi-version concurrency c…...

快递物流单号识别API接口DEMO下载

单号识别API为用户提供单号识别快递公司服务&#xff0c;依托于快递鸟大数据平台&#xff0c;用户提供快递单号&#xff0c;即可实时返回可能的一个或多个快递公司&#xff0c;存在多个快递公司结果的&#xff0c;大数据平台根据可能性、单号量&#xff0c;进行智能排序。 应用…...

Jetpack——Room

概述 Room是谷歌公司推出的数据库处理框架&#xff0c;该框架同样基于SQLite&#xff0c;但它通过注解技术极大简化了数据库操作&#xff0c;减少了原来相当一部分编码工作量。在使用Room之前&#xff0c;要先修改模块的build.gradle文件&#xff0c;往dependencies节点添加下…...

Dynamic Connected Networks for Chinese Spelling Check(ACL2021)

Dynamic Connected Networks for Chinese Spelling Check(ACL2021) 一&#xff0e;概述 文中认为基于bert的非自回归语言模型依赖于输出独立性假设。不适当的独立性假设阻碍了基于bert的模型学习目标token之间的依赖关系&#xff0c;从而导致了不连贯的问题。为些&#xff0c…...

前端vue-3种生命周期,只能在各自的领域使用

上面的表格可以简化为下面的两句话&#xff1a; setup是语法糖&#xff0c;下面的两个import导入是vue3和vue2的区别&#xff0c;现在的vue3直接导入&#xff0c;比之前vue2简单 还可以是导入两个生命周期函数...

el-upload如何自定展示上传的文件

Element UI 中&#xff0c;el-upload 组件支持通过插槽&#xff08;slot&#xff09;来自定义文件列表的展示方式。这通常是通过 file-list 插槽来实现的。下面是一个使用 el-upload 组件并通过 file-list 插槽来自定义文件列表展示的完整示例代码。 在这个示例中&#xff0c;…...

研1日记15

1. 文心一言生成&#xff1a; 在PyTorch中&#xff0c;nn.AdaptiveAvgPool1d(1)是一个一维自适应平均池化层。这个层的作用是将输入的特征图&#xff08;或称为张量&#xff09;在一维上进行自适应平均池化&#xff0c;使得输出特征图的大小在指定的维度上变为1。这意味着&…...

基于Nginx搭建点播直播服务器

实现直播和点播离不开服务器⽀持&#xff0c;可以使用开源的NGINX服务器搭建直播和点播服务。 当然&#xff0c;NGINX本身是不⽀持视频的&#xff0c;需要为NGINX增加相应的RTMP模块进行支持。 1、下载nginx和rtmp模块 # nginx wget ht tp://nginx.org/download/nginx-1.18.…...

QT LineEdit显示模式

QT LineEdit显示模式 QLineEdit 显示模式:   Normal 普通模式   NoEcho 不回写&#xff0c;即输入内容是有的&#xff0c;但是显示不出来,就是不在 QLineEdit 输入框中显示&#xff0c;但是触发例如 textChanged 信号会将所输入的文字写出来   Password 显示密码   Pa…...

IT技术在数字化转型中的关键作用

IT技术在数字化转型中的关键作用 在当今数字化浪潮中&#xff0c;IT技术无疑扮演着核心角色。无论是企业的数字化转型&#xff0c;还是政府公共服务的智能化提升&#xff0c;信息技术都在推动着整个社会向更高效、更智能的方向发展。本文将探讨IT技术在数字化转型中的关键作用…...

【C++指南】C++中nullptr的深入解析

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C指南》 期待您的关注 目录 引言 一、nullptr的引入背景 二、nullptr的特点 1.类型安全 2.明确的空指针表示 3.函数重载支…...

解决启动docker desktop报The network name cannot be found的问题

现象 deploying WSL2 distributions ensuring main distro is deployed: checking if main distro is up to date: checking main distro bootstrap version: getting main distro bootstrap version: open \wsl$\docker-desktop\etc\wsl_bootstrap_version: The network name…...

Guava: 探索 Google 的 Java 核心库

Guava 是 Google 开发的一套 Java 核心库&#xff0c;它提供了一系列新的集合类型&#xff08;例如多映射 multimap 和多集合 multiset&#xff09;、不可变集合、图形库以及用于并发、I/O、哈希、原始类型、字符串等的实用工具。Guava 在 Google 的大多数 Java 项目中得到了广…...

Qt-qmake概述

概述 qmake工具为您提供了一个面向项目的系统&#xff0c;用于管理应用程序、库和其他组件的构建过程。这种方法使您能够控制使用的源文件&#xff0c;并允许简洁地描述过程中的每个步骤&#xff0c;通常在单个文件中。qmake将每个项目文件中的信息扩展为一个Makefile&#xf…...

【protobuf】ProtoBuf的学习与使用⸺C++

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#xff1a;之前我们学习了Linux与windows的protobuf安装&#xff0c;知道protobuf是做序列化操作的应用&#xff0c;今天我们来学习一下protobuf。 目录 ⼀、初识ProtoBuf 步骤1&#xff1a;创建.proto文件 步…...

【iOS】MVC架构模式

文章目录 前言MVC架构模式基本概念通信方式简单应用 总结 前言 “MVC”&#xff0c;即Model&#xff08;模型&#xff09;&#xff0c;View&#xff08;视图&#xff09;&#xff0c;Controller&#xff08;控制器&#xff09;,MVC模式是架构模式的一种。 关于“架构模式”&a…...

ML 系列:机器学习和深度学习的深层次总结(08)—欠拟合、过拟合,正确拟合

ML 系列赛&#xff1a;第 9 天 — Under、Over 和 Good Fit 文章目录 一、说明二、了解欠拟合、过拟合和实现正确的平衡三、关于泛化四、欠拟合五、过拟合六、适度拟合七、结论 一、说明 在有监督学习过程中&#xff0c;对于指定数据集进行训练&#xff0c;训练结果存在欠拟合…...

Unity-物理系统-刚体加力

一 刚体自带添加力的方法 给刚体加力的目标就是 让其有一个速度 朝向某一个方向移动 1.首先应该获取刚体组件 rigidBody this.GetComponent<Rigidbody>(); 2.添加力 //相对世界坐标 //世界坐标系 Z轴正方向加了一个里 //加力过后 对象是否停止…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...