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.xdnf.cn/news/146738.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

《程序猿之设计模式实战 · 模板方法》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

NodeJs文档

文件操作 // 1. 导入fs模块 const fs require(fs)文件写入 //异步写入 // fs.writeFile(文件名&#xff0c; 待写入的数据&#xff0c; 选项设置&#xff08;可选&#xff09;&#xff0c; 回调函数) fs.writeFile(./座右铭.txt, 三人行&#xff0c;必有我师傅, err > {/…

专注并不意味只做一件事

原创内容第658篇&#xff0c;专注量化投资、个人成长与财富自由。 财务自由本身就是一个很有争议的领域。 有谁能靠别人实现财富自由呢&#xff1f; 这个逻辑起点本身就有问题。 如果预期正确&#xff0c;那这些自媒体还是有用处的。 好比我现在对于阅读和书籍的预期&…

看过来!这水凝胶,机械强、抗冻佳、导电优

大家好&#xff0c;如今智能穿戴设备越来越普及&#xff0c;但传统传感器有不少局限性。比如说&#xff0c;传统水基水凝胶用作柔性传感器材料时&#xff0c;保水性和抗冻性就不太好&#xff0c;这会影响其稳定性和应用范围。那有没有什么办法解决这些问题呢&#xff1f;今天我…

增强现实系列—Real-Time Simulated Avatar from Head-Mounte

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

软考流水线计算

某计算机系统输入/输出采用双缓冲工作方式&#xff0c;其工作过程如下图所示&#xff0c;假设磁盘块与缓冲区大小相同&#xff0c;每个盘块读入缓冲区的时间T为10μs&#xff0c;由缓冲区送至用户区的时间M为6μs&#xff0c;系统对每个磁盘块数据的处理时间C为2μs。若用户需要…

SaaS业务架构:业务能力分析

大家好&#xff0c;我是汤师爷~ 今天聊聊SaaS业务架构的业务能力分析。 业务能力概述 简单来说&#xff0c;业务能力是企业“做某事的能力”。 业务能力描述了企业当前和未来应对挑战的能力&#xff0c;即企业能做什么或需要做什么。业务能力建模的关键在于定义了企业做什么…

linux 安装libreoffice

yum install libreoffice 有点大有一个G

libreoffice word转pdf

一、准备一个word文件 运行&#xff1a; cd /root libreoffice --headless --convert-to pdf --outdir /root/output doc1.docx 发现中文乱码&#xff1a; 此时我们需要给linux 上添加中文字体&#xff1a; centos7 添加中文字体 再次运行正常&#xff1a; libreoffice --h…

中断-MCU

中断 目录 中断 中断的概念 中断的执行过程 中断服务函数 中断的部分专业术语 – 了解 STM32中的中断分类 嵌套向量中断控制器 NVIC STM32中的中断优先级 中断编程 外部中断&#xff08;单片机之外&#xff09;之EXTI中断 相关寄存器 外部中断&#xff08;EXTI&am…

EdgeRoute_镜像烧录

1. EdgeRouter 概述 EdgeRouter Lite 是由 Ubiquiti Networks 公司生产的一款高性能网络路由器&#xff0c;适用于家庭和小型办公环境。它的尺寸为200 x 90 x 30 mm&#xff0c;重量为345克&#xff0c;配备了双核500 MHz的MIPS64处理器&#xff0c;并带有硬件加速功能&#x…

《AI系统:原理与架构》于华为HC大会2024正式发布

2024年9月21日&#xff0c;《AI系统&#xff1a;原理与架构》新书发布会在上海世博馆华为HC大会顺利举办。本书由华为昇腾技术专家、B站AI科普博主ZOMI酱和哈工大软件学院副院长苏统华教授联合编写&#xff0c;是领域内AI系统方面填补空白的重磅之作。 发布会上&#xff0c;《A…

机器人学基础——旋转矩阵转四元数的C++程序实现

一、理论基础 1. 旋转矩阵 旋转矩阵通常是一个3x3矩阵&#xff0c;表示物体的旋转变换。一个标准的旋转矩阵 ( R ) 如下&#xff1a; R ( r 11 r 12 r 13 r 21 r 22 r 23 r 31 r 32 r 33 ) R \begin{pmatrix} r_{11} & r_{12} & r_{13} \\ r_{21} & r_{22} &am…

github demo网页制作

demo网页制作 1.创建一个空项目 2.上传编辑好的文件到本地服务器 3.申请一个token 4.本地项目夹下执行 git init git add --all git commit -m ‘first try’ git remote add origin https://github.com/username/reponame.git git push -u origin master 这个时候需要输入用…

在曲线图上最值和极值点位置进行适当标注

1、首先生成一组0-100的随机数&#xff0c;组内共有100个数据&#xff1b; yyrandi([0,100],[1,100]); 2、求这组数据的功率谱密度&#xff0c;并绘图&#xff1b; msize(yy,2); xdft fft(yy); % 计算功率谱密度 psd (1/m) * abs(xdft).^2; x1:m; loglog(x,psd,Linewid…

树及二叉树(选择题)

树 在树中&#xff0c;总结点数为所有结点的度和再加一 5、设一棵度为3的树&#xff0c;其中度为2&#xff0c;1.0的结点数分别为3&#xff0c;1&#xff0c;6。该树中度为3 的结点数为_。 二叉树 设二叉树的所有节点个数为N&#xff0c;度为零的结点&#xff08;叶子结点…

基于Java springboot+mybatis 家具城进销存管理系统 (1)

基于Java springbootmybatis 家具城进销存管理系统 一、系统介绍二、功能展示1.登记出库(销售员)2.出库记录&#xff08;销售员&#xff09;3.首页(仓库管理员)4.出库管理&#xff08;仓库管理员&#xff09;5.统计分析&#xff08;仓库管理员&#xff09;6.账号管理&#xff0…

8588 表达式求值

### 思路 1. **初始化栈**&#xff1a;创建两个栈&#xff0c;一个用于存储操作数&#xff0c;另一个用于存储操作符。 2. **遍历表达式**&#xff1a;逐个字符检查&#xff1a; - 如果是数字&#xff0c;读取完整数字并压入操作数栈。 - 如果是操作符&#xff0c;根据优…

asp.net门诊管理系统网站(含协同过滤算法)VS开发sqlserver数据库web结构c#编程web网页设计

一、源码特点 asp.net门诊管理系统网站是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言 开发。 应用技术&#xff1a;asp.net c…

x-cmd pkg | bat: cat 命令现代化替代品,终端用户必备工具

目录 简介快速上手安装使用与第三方工具组合使用 功能特点竞品和相关作品进一步阅读 简介 bat 是由 github.com/sharkdp 用 Rust 开发的 cat 命令现代化替代品。它比 cat 命令扩展了更多的现代化功能&#xff0c;如语法高亮、自动分页、Git集成等&#xff0c;能为用户提供更为…