vColorPicker与vue3-colorPicker——基于 Vue 的颜色选择器插件

文章目录

  • 前言
    • 样例
    • 特点
  • 一、使用步骤?
    • 1. 安装
    • 2.引入
    • 3.在项目中使用 vcolorpicker
  • 二、选项
  • 三、事件
  • 四、问题反馈
    • 问题所在
    • 安装
    • 引入
    • 例子
    • 效果图


前言

vColorPicker——官网
vColorPicker——GitHub

样例

在这里插入图片描述

vColorPicker是基于 Vue 的一款颜色选择器插件,仿照Angular的color-picker插件制作

特点

  • 简单易用,UI在原插件基础上优化增加了圆角和过渡动画
  • 提供以 npm 的形式安装提供全局组件
  • 在支持 html5 input[type=‘color’] 的浏览器实现了「更多颜色」的功能

一、使用步骤?

1. 安装

npm install vcolorpicker -S

2.引入

main.js 文件中引入插件并注册

# main.js
import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker)

3.在项目中使用 vcolorpicker

<template><colorPicker v-model="color" />
</template>
<script>export default {data () {return {color: '#ff0000'}}}
</script>

二、选项

你可以通过在所在的元素上设置以下属性来配置color-picker

  • defaultColor:默认颜色,如defaultColor=“#ff0000”
  • disabled:禁用状态,如disabled=true

三、事件

change颜色值改变的时候触发

<colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>

四、问题反馈

今天下载装了一下,发现布局有问题,倒腾一个多小时,也不知道因为啥,有知道的可以私信我一下。

问题所在

在这里插入图片描述

所以又换了颜色插件

vue3-colorPicker

安装

npm install vue3-colorpicker

引入

import Vue3ColorPicker from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
app.use(Vue3ColorPicker)

例子

需要再装一下tinycolor2插件,局部引入就行

<template><div><color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor"/></div>
</template>
<script lang="ts">import { ref } from "vue";import { ColorInputWithoutInstance } from "tinycolor2";export default defineComponent({setup() {const pureColor = ref<ColorInputWithoutInstance>("red");const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");return { pureColor, gradientColor }}});
</script>

效果图

在这里插入图片描述

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

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

相关文章

【QT】续写文本存储到文件

续写文本到文件 使用标记QFile::WriteOnly| QIODevice::Append打开文件 QString strConfigFile "C:\\Users\\xiaosheng\\Desktop\\Log.txt"; QFile file1(strConfigFile); QString strLog2; strLog2 "strKeyId" "\n"; if (file1.open(QFile…

【入门Flink】- 10基于时间的双流联合(join)

统计固定时间内两条流数据的匹配情况&#xff0c;需要自定义来实现——可以用窗口&#xff08;window&#xff09;来表示。为了更方便地实现基于时间的合流操作&#xff0c;Flink 的 DataStrema API 提供了内置的 join 算子。 窗口联结&#xff08;Window Join&#xff09; 一…

面向对象基础(以python语言为例)

1、定义一个类&#xff1b;实例化类的对象&#xff1b;调用类中的方法 #定义一个类 class Student:#类方法&#xff08;即函数&#xff09;def study(self,course_name):print(f学生正在学习{course_name})def play(self):print("xx学生正在玩游戏")#实例化&#xf…

Linux c/c++服务器开发实践

在Linux C开发环境中&#xff0c;通常有两种方式来开发多线程程序&#xff0c;一种是利用POSIX多线程 API函数来开发多线程程序&#xff0c;另外一种是利用C自带线程类来开发程序。 常见的与线程相关的基本API函数&#xff1a; API函数含义pthread_create创建线程pthread_exi…

从0到1实现一个前端监控系统(附源码)

目录 一、从0开始 二、上报数据方法 三、上报时机 四、性能数据收集上报 收集上报FP 收集上报FCP 收集上报LCP 收集上报DOMContentLoaded 收集上报onload数据 收集上报资源加载时间 收集上报接口请求时间 五、错误数据收集上报 收集上报资源加载错误 收集上报js错…

详解JS中的对象

1、语法 对象的声明有两种形式&#xff0c;声明&#xff08;文字&#xff09;形式和构造形式 // 文字形式 var mtObj {key:value... } // 构造形式 var myObj new Object() myObj.key value构造形式与文字形式生成的对象是一样的&#xff0c;唯一的区别在于文字形式可以添…

Linux下C++调用python脚本实现LDAP协议通过TNLM认证连接到AD服务器

1.前言 首先要实现这个功能&#xff0c;必须先搞懂如何通过C调用python脚本文件最为关键&#xff0c;因为两者的环境不同。本质上是在 c 中启动了一个 python 解释器&#xff0c;由解释器对 python 相关的代码进行执行&#xff0c;执行完毕后释放资源。 2 模块功能 2.1python…

Windows server 2008 R2 IIS搭建ASP网站教程

一、安装应用程序服务器 提示安装成功 二、添加角色服务asp 三、asp网站配置 放入源码 设置网站首页为index.asp: 设置应用程序池 四、设置网站目录属性 五、access数据库连接配置 Cd c:\Windows\System32\inetsrv appcmd list apppool /xml | appcmd set apppool /…

K9203 996920302 面向DNP3的网络安全解决方案

K9203 996920302 面向DNP3的网络安全解决方案 2014年ISA卓越技术创新奖获得者&#xff0c;超电子&#xff0c;3eTI的CyberFence工业防火墙解决方案提供强大加密和应用程序级深度数据包检测(DPI)功能。最近&#xff0c;3eTI为其CyberFence产品线增加了DNP3(分布式网络协议)支持…

替代huggingface下载大模型的站点

0. 引入 huggingface是个好网站&#xff0c;大模型的下载都得靠他&#xff0c;但是网络问题一直是一言难尽&#xff0c;所以只好找找其他替代品。目前发现的代替网站如下&#xff0c;后续如有新发现&#xff0c;还会再来更新到这里。 1. aliendao https://aliendao.cn/ 是一…

SpringBoot Web开发

SpringBoot3-Web开发 SpringBoot的Web开发能力&#xff0c;由SpringMVC提供。 Web开发的三种方式 方式处理过程注意事项实现效果全自动直接编写控制逻辑全部使用自动给配置默认效果手自一体Configuration、 配置WebMvcConfigurer、 配置WebMvcRegistrations不要标注 EnableWeb…

【Linux】:静动态库

静动态库 一.静态库1.设计静态库2.生成静态库3.发布静态库4.使用静态库 二.动态库1.设计动态库2.生成和发布动态库3.使用 一.静态库 程序在编译链接的时候把库的代码链接到可执行文件中。程序运行的时候将不再需要静态库。 静态库链接格式&#xff1a;libxxx.a(前缀是lib,后缀是…

2023-11-12

今日比较摆烂, 但是把自写管道的原理搞懂了, 主要是把 exp 完完全全看懂了, 还不错. 然后就没干啥了. 明日计划: 学校的作业. AFL 源码. 我真是服了我自己了, AFL 源码搁多久了, 操操操 然后把 seccomp 重新学习下

基于安卓android微信小程序的四六级助手系统

项目介绍 随着我国教育需求不断增加&#xff0c;高校教育资源有限&#xff0c;教育经费相对不足的情况下&#xff0c;利用现代信息技术发展高等教育&#xff0c;不仅充分利用了优秀的教育资源&#xff0c;而且为更多的人提供接受高等教育的机会&#xff0c;同时这也是极大促进…

【Unity每日一记】“调皮的协程”,协程和多线程的区别在哪里

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

网络原理-UDP/TCP详解

一. UDP协议 UDP协议端格式 由上图可以看出&#xff0c;一个UDP报文最大长度就是65535. • 16位长度&#xff0c;表示整个数据报&#xff08;UDP首部UDP数据&#xff09;的最大长度&#xff08;注意&#xff0c;这里的16位UDP长度只是一个标识这个数据报长度的字段&#xff0…

机器视觉目标检测 - opencv 深度学习 计算机竞赛

文章目录 0 前言2 目标检测概念3 目标分类、定位、检测示例4 传统目标检测5 两类目标检测算法5.1 相关研究5.1.1 选择性搜索5.1.2 OverFeat 5.2 基于区域提名的方法5.2.1 R-CNN5.2.2 SPP-net5.2.3 Fast R-CNN 5.3 端到端的方法YOLOSSD 6 人体检测结果7 最后 0 前言 &#x1f5…

单链表按位序与指定结点 删除

按位序删除(带头结点) #define NULL 0 #include<stdlib.h>typedef struct LNode {int data;struct LNode* next; }LNode, * LinkList;//按位序删除&#xff08;带头结点&#xff09; bool ListInsert(LinkList& L, int i, int& e) {if (i < 1)return false;L…

iPhone或在2024开放第三方应用商店。

iPhone或开放第三方应用商店&#xff0c;可以说这是一个老生常谈的话题。对于像是iOS这样封闭的系统来说&#xff0c;此前传出苹果可能开放侧载消息的时候&#xff0c;又有谁能信&#xff0c;谁会信&#xff1f; 如果是按照苹果自身的意愿&#xff0c;这种事情自然是不可能发生…

RestTemplate.postForEntity 方法进行 HTTP POST 请求

RestTemplate 是 Spring Framework 提供的一个用于处理 HTTP 请求的客户端工具。其中&#xff0c;postForEntity 是 RestTemplate 提供的用于发送 HTTP POST 请求并返回 ResponseEntity 对象的方法。 public <T> ResponseEntity<T> postForEntity(String url, Obj…