vue element plus ColorPicker 颜色选择器

news/2024/4/15 4:24:29/文章来源:https://blog.csdn.net/m0_72196169/article/details/135514561

用于颜色选择,支持多种格式。

TIP

在 SSR 场景下,您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

基础用法#

使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型。

With default value

With no default value

选择透明度#

ColorPicker 支持普通颜色,也支持带 Alpha 通道的颜色,通过show-alpha属性即可控制是否支持透明度的选择。 要启用 Alpha 选择,只需添加 show-alpha 属性。

预定义颜色#

ColorPicker 支持预定义颜色

不同尺寸#

API#

Attributes#

属性名说明类型默认值
model-value / v-model选中项绑定值string
disabled是否禁用booleanfalse
size尺寸enum
show-alpha是否支持透明度选择booleanfalse
color-format写入 v-model 的颜色的格式enum
popper-classColorPicker 下拉框的类名string
predefine预定义颜色object
validate-event输入时是否触发表单的校验booleantrue
tabindexColorPicker 的 tabindexstring / number0
label a11yColorPicker 的 aria-labelstring
idColorPicker 的 idstring

Events#

事件名说明类型
change当绑定值变化时触发Function
active-change面板中当前显示的颜色发生改变时触发Function
focus 2.4.0当获得焦点时触发Function
blur 2.4.0当失去焦点时触发Function

Exposes#

名称说明类型
color当前色彩对象object
show 2.3.3手动显示颜色选择器Function
hide 2.3.3手动隐藏颜色选择器Function
focus 2.3.13使 picker 获得焦点Function
blur 2.3.13使 picker 失去焦点Function

源代码#

组件 • 文档

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

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

相关文章

【Spring Boot 3】获取已注入的Bean

【Spring Boot 3】获取已注入的Bean 背景介绍开发环境开发步骤及源码工程目录结构总结 背景 软件开发是一门实践性科学&#xff0c;对大多数人来说&#xff0c;学习一种新技术不是一开始就去深究其原理&#xff0c;而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历…

SpringMVC-异步调用,拦截器与异常处理

1.异步调用 1.发送异步请求 <a href"javascript:void(0);" id"testAjax">访问controller</a> <script type"text/javascript" src"js/jquery-3.7.1.js"></script> <script type"text/javascript&qu…

大华IPC网络摄像机如何保存视频

一、背景 通常网络相机&#xff08;IPC&#xff09;不会自带存储功能&#xff0c;需要接入录像机&#xff08;NVR&#xff09;进行保存。 其中NVR也分软件存储及硬件存储&#xff0c;这里不提&#xff0c;这边单独说FTP存储 二、配置前提 要配置FTP存储需要&#xff1a;①网络…

Mac版2024 CleanMyMac X 4.14.6 核心功能详解以及永久下载和激活入口

CleanMyMac 是 macOS 上久负盛名的系统清理工具&#xff0c;2018 年&#xff0c;里程碑式版本 CleanMyMac X 正式发布。不仅仅是命名上的变化&#xff0c;焕然一新的 UI、流畅的动画也让它显得更加精致。新增的系统优化、软件更新等功能&#xff0c;使得在日常使用 macOS 时有了…

重读 Java 设计模式: 探索经典之道与 Spring 框架的设计

写在开头 记得大学刚毕业那会儿&#xff0c;想学点东西&#xff0c;于是拿出了《Head First 设计模式》这本书&#xff0c;就开始了阅读&#xff0c;我曾对这些模式感到晦涩难懂。然而&#xff0c;随着工作岁月的增长&#xff0c;我逐渐领悟到设计模式的价值&#xff0c;尤其是…

Android14音频进阶:AudioTrack如何巧妙衔接AudioFlinger(五十七)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只…

11. C语言标准函数库

C语言制定了一组使用方式通用的函数&#xff0c;称为C语言标准函数库&#xff0c;用于实现编程常用功能&#xff0c;标准函数库由编译器系统提供&#xff0c;并按功能分类存储在不同源代码文件中&#xff0c;调用标准库内函数时需要首先使用 #include 连接对应的源代码文件。 【…

RMII接口接口解析

RMII接口综述 RMII接口有12个信号线&#xff0c;所有信号名称都是从MAC层侧说明的&#xff0c;主要#包括四个部分。一是从MAC层到物理层的发送数据接口&#xff0c;二是从MAC层到物理层的接收数据接口&#xff0c;三是物理层与MAC层之间时钟接口&#xff0c;四是MAC层和物理层之…

深入理解 Vuex:从基础到应用场景

前言 在之前的文章中&#xff0c;我们已经对 Vue.js 有了一定的了解。今天我们要对Vue官方的状态共享管理器Vuex进行详细讲解&#xff0c;将其基本吃透&#xff0c;目标是面对大多数业务需求&#xff1b; 一、介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用…

加密 / MD5算法 /盐值

目录 加密的介绍 MD5算法 盐值 加密的介绍 加密介绍&#xff1a;在MySQL数据库中, 我们常常需要对密码, 身份证号, 手机号等敏感信息进行加密, 以保证数据的安全性。 如果使用明文存储, 当黑客入侵了数据库时, 就可以轻松获取到用户的相关信息, 从而对用户或者企业造成信息…

27.基于springboot + vue实现的前后端分离-网上租赁交易系统(项目 + 论文)

项目介绍 本课题是根据用户的需要以及网络的优势建立的一个基于Spring Boot的网上租贸系统&#xff0c;来满足用户网络商品租赁的需求。本网上租贸系统应用Java技术&#xff0c;MYSQL数据库存储数据&#xff0c;基于Spring Boot框架开发。在网站的整个开发过程中&#xff0c;首…

独立站营销新纪元:AI与大数据塑造个性化体验的未来

随着全球互联网的深入发展和数字化转型的不断推进&#xff0c;作为品牌建设和市场营销的重要载体&#xff0c;独立站将迎来新的发展机遇。新技术的涌现&#xff0c;特别是人工智能和大数据等技术的广泛应用&#xff0c;为独立站带来了前所未有的机遇与挑战。本文Nox聚星将和大家…

OpenText Availability——适用于 Windows 和 Linux 服务器的高可用性和灾难恢复解决方案

OpenText Availability——适用于 Windows 和 Linux 服务器的高可用性和灾难恢复解决方案 连续复制&#xff0c;最大限度地减少数据丢失快速故障转移&#xff0c;最大限度地减少停机时间可忽略的性能影响支持物理、虚拟和基于云的系统平台 停机从多种途径侵扰 IT 企业。 从相…

长三角自动驾驶行业盛会“2024上海国际自动驾驶技术展览会”

2024上海国际自动驾驶技术展览会 2024 Shanghai International Autonomous driving Expo 时间:2024年6月13-15日 地点:上海新国际博览中心 前言 智能驾驶已经成为了汽车行业的重要趋势。在这个时代背景下&#xff0c;汽车不仅仅是一种交通工具&#xff0c;更成为了一种智能设…

【QT C++实践】Qt 项目中一个界面动态处理多张数据库中的表|附源码

一、前言 在之前那篇讲如何使用QT连接数据库时&#xff08;QT C实践|超详细数据库的连接和增删改查操作|附源码)&#xff0c;做了一个简单的对数据库进行增删改查的界面(如下&#xff09;。 但是存在一个问题就是&#xff1a;这个界面只是对一张表进行操作&#xff0c;但是我…

【leetcode热题】环形链表

难度&#xff1a; 简单通过率&#xff1a; 34.9%题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定一个链表&#xff0c;判断链表中是否有环。 为了表示给定链表中的环&#xff0c;我们使用整数 pos 来表示链表尾连接到链表中的位置&#xff08;索…

TCPDump 使用教程

每次服务器网络不通的时候&#xff0c;总会听到一个声音&#xff0c;你去抓包啊&#xff0c;那这里就来介绍下TCPDump&#xff0c;一款强大的网络分析工具&#xff0c;可以捕获网络上的数据包&#xff0c;并进行分析。这款工具在网络管理员和安全专家中非常受欢迎。 一、安装 …

CorelDRAW Graphics Suite 2024最新图文安装教程

2024年3月&#xff0c;备受瞩目的矢量制图及设计软件——CorelDRAW Graphics Suite 2024 正式面向全球发布。这一重大更新不仅是 CorelDRAW 在 36 年创意服务历史中的又一重要里程碑&#xff0c;同时也展现了其在设计软件领域不断创新和卓越性能的领导地位。 历经 36 年&#x…

两天学会微服务网关Gateway-Gateway HelloWorld快速入门

锋哥原创的微服务网关Gateway视频教程&#xff1a; Gateway微服务网关视频教程&#xff08;无废话版&#xff09;_哔哩哔哩_bilibiliGateway微服务网关视频教程&#xff08;无废话版&#xff09;共计17条视频&#xff0c;包括&#xff1a;1_Gateway简介、2_Gateway工作原理、3…

如何远程访问电脑文件?

远程访问电脑文件是当今数字化时代中十分常见且实用的技术。它允许我们从任何地方的计算机或移动设备访问和操作我们的电脑中的文件。无论是远程工作、远程学习、远程协作还是方便地获得自己计算机上的重要文件&#xff0c;远程访问电脑文件都为我们提供了巨大的便利。 在远程访…