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

news2024/9/23 8:20:50

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';
<ColorPicker
                  v-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.coloradmin.cn/o/2157064.html

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

相关文章

18_Python文件操作

计算机中的文件 文件是存储在计算机上的数据集合&#xff0c;它可以是文本、图片、音频、视频或其他任何类型的数据。 在计算机系统中&#xff0c;文件通常用来长期保存信息。 文本文件&#xff1a;一种以字符编码&#xff08;如ASCII、UTF-8、UTF-16等&#xff09;的形式存储…

C++离线查询

前言 C算法与数据结构 打开打包代码的方法兼述单元测试 概念及原理 离线算法( offline algorithms)&#xff0c;离线计算就是在计算开始前已知所有输入数据&#xff0c;输入数据不会产生变化&#xff0c;且在解决一个问题后就要立即得出结果的前提下进行的计算。 通俗的说&a…

深入浅出:Eclipse 中配置 Maven 与 Spark 应用开发全指南

Spark 安装配置 1.在 Eclipse 中配置 Maven Eclipse 中默认自带 Maven 插件&#xff0c;但是自带的 Maven 插件不能修改本地仓库&#xff0c;所 以通常我们不使用自带的 Maven &#xff0c;而是使用自己安装的&#xff0c;在 Eclipse 中配置 Maven 的 步骤如下&#xff1a;…

多模态大模型应用开发技术学习

前篇提到多模态模型应用是未来的应用方向&#xff0c;本篇就聊聊技术学习方面的内容。 应用场景 多模态大模型技术的应用场景非常广泛&#xff0c;涵盖了从日常生活到专业领域的各个方面。以下是一些主要的应用场景&#xff1a; 办公自动化&#xff1a;多模态大模型可以用于…

K8s 之微服务的定义及详细资源调用案例

什么是微服务 用控制器来完成集群的工作负载&#xff0c;那么应用如何暴漏出去&#xff1f; 需要通过微服务暴漏出去后才能被访问 Service是一组提供相同服务的Pod对外开放的接口。借助Service&#xff0c;应用可以实现服务发现和负载均衡。service默认只支持4层负载均衡能力&…

指针 (七)

一 . 回调函数 什么是回调函数呢&#xff1f;就是说我们将函数的指针&#xff08;地址&#xff09;作为参数传递给另一个函数&#xff0c;当这个指针被用来调用其所指向的函数时&#xff0c;这个被调用的函数就是回调函数。回调函数并不是由该函数的实现方直接调用&#xff0c…

MySQL函数介绍--日期与时间函数(二)

我相信大家在学习各种语言的时候或多或少听过我们函数或者方法这一类的名词&#xff0c;函数在计算机语言的使用中可以说是贯穿始终&#xff0c;那么大家有没有思考过到底函数是什么&#xff1f;函数的作用又是什么呢&#xff1f;我们为什么要使用函数&#xff1f;其实&#xf…

移动技术开发:RecyclerView瀑布流水果列表

1 实验名称 RecyclerView瀑布流水果列表 2 实验目的 掌握RecyclerView控件的实现方法和基本应用 3 实验源代码 布局文件代码&#xff1a; activity_main&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android&q…

【学习笔记】手写 Tomcat 五

目录 一、优化 Servlet 创建一个抽象类 继承抽象类 二、三层架构 业务逻辑层 数据访问层 1. 在 Dao 层操作数据库 2. 调用 Dao 层&#xff0c;实现业务逻辑功能 3. 调用 Service 层&#xff0c;响应数据 测试 三、数据库连接池 1. 手写数据库连接池 2. 创建数据库…

C语言题目之单身狗2

文章目录 一、题目二、思路三、代码实现 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、题目 二、思路 第一步 在c语言题目之打印单身狗我们已经讲解了在一组数据中出现一个单身狗的情况&#xff0c;而本道题是出现两个单身狗的情况。根据一个数…

当Navicat报错 Can not connect to MySQL server的解决方法!

今天运行数据库时突然弹出一个error&#xff1a; 原因&#xff1a;MySQL的服务没有打开&#xff0c;需要检查MySQL的开启状态即可。 具体做法&#xff1a; 1.右键“开始”&#xff0c;点击“计算机管理” 2. 选择“服务和应用程序”&#xff0c;并点击“服务” 3.在服务中找…

ESP32-WROOM-32 [创建AP站点-TCP服务端-数据收发]

简介 ESP32 创建TCP Server AP站点&#xff0c; PC作为客户端连接站点并收发数据 指令介绍 注意,下面指令需要在最后加上CRLF, 也就是\r\n(回车换行) ATRESTORE // 恢复出厂设置 ATCWMODE2 // 设置 Wi-Fi 模式为 softAP ATCIPMODE0 // 需要数据传输模式改为0&#xff0c; 普通…

Cesium 绘制可编辑点

Cesium Point点 实现可编辑的pointEntity 实体 文章目录 Cesium Point点前言一、使用步骤二、使用方法二、具体实现1. 开始绘制2.绘制事件监听 三、 完整代码 前言 支持 鼠标按下 拖动修改点&#xff0c;释放修改完成。 一、使用步骤 1、点击 按钮 开始 绘制&#xff0c;单…

河钢数字PMO牛红卫受邀为第四届中国项目经理大会演讲嘉宾

全国项目经理专业人士年度盛会 河钢数字技术股份有限公司项目管理部PMO牛红卫受邀为PMO评论主办的全国项目经理专业人士年度盛会——2024第四届中国项目经理大会演讲嘉宾&#xff0c;演讲议题为“从技术到领导力——项目经理成长进阶之道”。大会将于10月26-27日在北京举办&…

知情人称,丹尼尔克雷格在卸任“007”以后他和蕾切尔薇兹的婚姻“产生了奇效”

丹尼尔克雷格、蕾切尔薇兹 虽然丹尼尔克雷格 (Daniel Craig) 因出演詹姆斯邦德 (James Bond) 而成为全球最耀眼的明星之一&#xff0c;实现了自己以及很多人的梦想&#xff0c;但知情人称他与蕾切尔薇兹 (Rachel Weisz) 的婚姻实际上正因此而陷入困境&#xff1b;但现在&#…

C# winforms DataGridView设置数据源自动显示表格

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…

高效打造知识图谱,使用LlamaIndex Relik实现实体关联和关系抽取

大家好&#xff0c;文本信息转化为知识图谱的技术&#xff0c;自问世以来一直是研究界的宠儿。大型语言模型&#xff08;LLMs&#xff09;的兴起让这个领域受到更多关注&#xff0c;但LLMs的成本之高令人却步。然而通过对小型模型微调优化&#xff0c;可以找到一种更经济高效的…

没有 Microsoft Wi-Fi Direct Virtual Adapter #2 导致无法打开热点

我的环境 电脑打不开热点 系统 win11 64位 品牌 hp 笔记本电脑 解决方法&#xff1a; https://answers.microsoft.com/zh-hans/windows/forum/all/%E7%A7%BB%E5%8A%A8%E7%83%AD%E7%82%B9%E6%97%A0/9285620a-71d9-4671-b125-4cd607b6371a 解决 &#x1f613; 扫描一下设…

读构建可扩展分布式系统:方法与实践12分布式数据库案例

1. Redis 1.1. 2009年首次发布 1.1.1. 更注重原始性能和简单性&#xff0c;而不是数据安全性和一致性 1.2. 主要吸引力在于它能够同时充当分布式缓存和数据存储 1.3. 维护一个内存中的数据存储&#xff0c;也称为数据结构存储(data structure store) 1.4. 配置Redis将每个…

每日学习一个数据结构-Trie树(字典树)

文章目录 定义节点结构根节点插入操作查找操作删除操作特点应用示例 “Trie”树&#xff0c;又称为前缀树或字典树&#xff0c;是一种专门用于存储字符串的数据结构。它在许多应用程序中都非常有用&#xff0c;特别是在那些需要高效查找、插入和删除字符串的应用场景中。下面是…