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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/432929.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Gitee自动化测试3】Git的本地使用,和在Gitee上使用

一. 创建版本库 存放项目&#xff0c;项目的删除更改&#xff0c;版本库都能够监控。 创建一个文件夹&#xff08;不要包含中文路径&#xff09;&#xff0c;右键选择Git Bash Here&#xff08;打开Git终端&#xff09; 输入git init 对文件夹进行版本库的初始化&#xff0c;…

【CSS】背景

background-color 颜色background-image 图像background-size 缩放background-repeat 平铺background-position 定位background-clip 裁剪区域background-origin 开始区域background-attachment 滚动方式 background-color 颜色 <style>div{width: 200px;height: 100px;…

LeetCode - 850 矩形面积 II

题目来源 850. 矩形面积 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个轴对齐的二维数组 rectangles 。 对于 rectangle[i] [x1, y1, x2, y2]&#xff0c;其中&#xff08;x1&#xff0c;y1&#xff09;是矩形 i 左下角的坐标&#xff0c; (xi1, yi1) 是该…

【机器学习】探索LSTM:深度学习领域的强大时间序列处理能力

目录 &#x1f354; LSTM介绍 &#x1f354; LSTM的内部结构图 2.1 LSTM结构分析 2.2 Bi-LSTM介绍 2.3 使用Pytorch构建LSTM模型 2.4 LSTM优缺点 &#x1f354; 小结 学习目标 &#x1f340; 了解LSTM内部结构及计算公式. &#x1f340; 掌握Pytorch中LSTM工具的使用. &…

【react案例】实现评论列表

1. 需求 展示评论列表实现删除功能 2.1 只有自己的评论才展示删除按钮 2.2 点击删除按钮&#xff0c;删除当前评论tab切换&#xff08;点击对应tab&#xff0c;对tab文案高亮处理&#xff09;评论高亮评论排序&#xff08;最新、最热&#xff09; 2. 实现思路 useState维护评…

【小程序】uniapp自定义图标组件可动态更换svg颜色

组件描述 通过图标名称加载对应svg&#xff0c;size参数调整图标大小&#xff0c;color参数调整图标颜色 解决思路&#xff1a; 存svg获svg&#xff0c;对象方式正则替换svg的fill值&#xff0c;不改变源文件&#xff0c;通过base64直接加载缓存svg源文件&#xff0c;避免重…

Android 通过自定义注解实现Activity间跳转时登录路由的自动拦截

应用场景 在Android 中部分软件需要登录才能使用&#xff0c;但是有的页面又不需要登录&#xff0c;Android不同于Web可以直接拦截重定向路由&#xff0c;因此如果在Android中如果需要检测是否登录&#xff0c;如果没登录跳转登录的话就需要再每个页面中判断&#xff0c;当然也…

Leetcode面试经典150题-39.组合总和

给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重复被选取 。如…

高级算法设计与分析 学习笔记9 跳表

单链表的样子我们很熟悉了&#xff1a; 怎么加快查找&#xff1f;&#xff1a; 查找的具体方法&#xff1a; 超过了就回头下去。 这条“快速路”最好是几个节点呢&#xff1f;&#xff1a; 假如我们弄好多层跳表呢&#xff1f;&#xff1a; 给弄成2叉树了&#xff01; 如何插入…

堆的数组实现

目录 一、堆 二叉树的顺序结构 堆的概念及结构 1.概念 2.堆的分类 (1)大堆 (2)小堆 二、利用数组(顺序结构)实现堆的过程 1.利用数组实现堆的思路 2.堆是用数组实现的&#xff0c;在数组中通过双亲找自己左右孩子、通过左右孩子找自己双亲的思路 2.1.思路 2.2.孩子与…

【YashanDB知识库】YMP迁移oracle不兼容给用户授权高级包

本文转自YashanDB官网&#xff0c;具体内容请见https://www.yashandb.com/newsinfo/7441382.html?templateId1718516 【标题】YMP迁移oracle不兼容给用户授权高级包 【关键字】oracle迁移&#xff0c;高级包授权 【问题描述】迁移评估任务中&#xff0c;oracle迁移YashanDB…

FOC电机驱动开发踩坑记录

关键技术 SVPWM电机磁场控制电流采样park变换和Clark变换滑膜观测器&#xff08;无感FOC&#xff09; SVPWM电机磁场控制 SVPWM主要思想是通过精确的对UVW三相电流的分时控制&#xff0c;来控制转子的合成力矩&#xff0c;达到目标方向&#xff0c;常用的是6分区的设计&…

RabbitMQ 高级特性——重试机制

文章目录 前言重试机制配置文件设置生命交换机、队列和绑定关系生产者发送消息消费消息 前言 前面我们学习了 RabbitMQ 保证消息传递可靠性的机制——消息确认、持久化和发送发确认&#xff0c;那么对于消息确认和发送方确认&#xff0c;如果接收方没有收到消息&#xff0c;那…

C++类和对象——第二关

目录 类的默认成员函数&#xff1a; &#xff08;一&#xff09;构造函数 &#xff08;二&#xff09;析构函数 &#xff08;三&#xff09;拷贝构造函数 类的默认成员函数&#xff1a; 类里面有6个特殊的成员函数分别包揽不同的功能; &#xff08;一&#xff09;构造函数…

极狐GitLab 17.4 升级指南

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab https://dl.gitlab.cn/6y2wxugm 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文分享极狐GitLab 17.4 升级…

老人跌倒扶不扶?涪城三职工给出响亮答案

一、关键时刻的选择 于绵阳市三江湖湿地公园&#xff0c;平凡午后&#xff0c;三名环卫人员刘后刚、严荣礼及杨树坤正紧张作业。突闻呼救声&#xff0c;一位老人在石阶上跌倒需援手。在紧急关头&#xff0c;他们果断抛却工具&#xff0c;疾速赶至老人身边。此举不仅展现了他们…

MySQL数据库进阶知识(四)《视图、存储过程、触发器》

学习目标&#xff1a; 掌握数据库视图基础知识 掌握数据库存储过程原理 掌握数据库触发器相关知识 学习内容&#xff1a; 一. 视图 介绍 视图&#xff08;View&#xff09;是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来自定义视图的查询…

JPEG图像的DCT(Discrete Cosine Transform)变换公式代码详解

引 言 网络上图像在传输过程中为节省内存空间主要采用jpeg格式。jpeg图属于有损压缩图像的一种。在图像篡改检测过程中&#xff0c;可以利用jpeg图像的单双压缩伪影的不同而判别图像为伪造图并可以定位伪造区域。RGB图像变成jpeg图像过程中涉及从RGB图变成YCbCr图像&#xff0c…

FreeRTOS(四)FreeRTOS列表与列表项

目录 列表 列表项 迷你列表项 列表和列表项的关系 列表相关API函数 列表初始化 列表项初始化 列表项插入 列表项末尾插入 列表项删除 列表遍历 在 FreeRTOS 中&#xff0c;列表&#xff08;List&#xff09;和列表项&#xff08;ListItem&#xff09;是核心数据结构&…

Centos7系统根分区空间小home空间大如何增加分区

Centos7 默认安装&#xff0c;区划默认划分&#xff0c;用着怎么感觉有问题&#xff0c;根分区太小50G&#xff0c;而home分区太大。 如果处理&#xff0c;能扩大根分区呢&#xff1f;如果是新安装的&#xff0c;可以先删除home&#xff0c;然后再扩容 根分区。最后使其生效。…