color-picker、vue3-color-picker

最新推荐文章于 2024-05-06 19:02:34 发布
置顶 最新推荐文章于 2024-05-06 19:02:34 发布
阅读量3.8k 收藏 2
点赞数 2
分类专栏： 05-Vue2 文章标签： vue.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Unrequited66/article/details/121225261
版权

ant-color-picker

前言

ant-design-vue的UI框架中，并没有colorPicker颜色选择器，但是在实际工作中又需要使用到，翻阅了其源码，组件中虽能见到color-picker的身影，但是却是使用不了的，在借鉴element-plus的color-picker的源码下封装了该组件。

效果

源码地址

地址：https://gitee.com/ghkeeping/ant-color-picker

文档

Attributes

参数说明类型可选值默认值
value/v-model绑定值string——
size尺寸stringlarge/default/smalldefault
show-alpha是否支持透明度选择boolean—false
color-format写入v-model的颜色格式stringhsl/hsv/hex/rgbhex（show-alpha 为 false）/ rgb（show-alpha 为 true）
predefine预定义颜色array——
placement颜色选择器弹出位置stringtop left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomtop

Events

事件名称说明回调参数
change当绑定值变化时触发当前值
active-change面板中当前显示的颜色发生改变时触发当前显示的颜色值
gh-coding
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-picker:Vue的选择器组件
05-14
中文 | vue-picker的组件，囊括了（普通选择、联动选择、中国地址选择）等等常见的picker，兼容PC、移动端，通过简单配置就可以出现一个强大的picker，感受下效果图。 Demo(快点去复制代码体验一波吧) Install npm install vue-pickers --save or yarn add vue-pickers 使用 普通网页开发直接复制lib/vue-picker.js文件夹到项目即可直接使用 <template> <div> <button @click="show">show picker</button> <VuePicker :data="pickData" :showToolbar="true" @cancel="cancel" @confirm="confirm" :vis
vue-native-color-picker:使用本机输入类型颜色的Vue拾色器
04-30
npm install vue-native-color-picker 进口 全球范围内： import InputColorPicker from "./vue-input-color-picker"; Vue.use(InputColorPicker); 或本地： import InputColorPicker from 'vue-native-color-...
vColorPicker与vue3-colorPicker——基于 Vue 的颜色选择器插件
qq_34082921的博客
11-11 5526
基于 Vue 的一款颜色选择器插件
Vue3中的工具取色器
最新发布
m0_48995032的博客
05-06 358
最近开发过程中，碰到需要给小程序根据banner动态导入背景色，后台需要配置推荐位的banner背景色的需求使用到了Arco-Design的ColorPicker组件发现没有取色器的功能，可能是因为刚更新的组件还没有完善，看到了github其他开发者提的issues也有反馈，然后就自己去加一下这个功能（其实也可以完成功能，只是体验感不好，
Vue3+ts实现一个颜色选择器
qq_32021429的博客
05-30 1836
Vue3+ts实现的颜色选择器
React 通关秘籍 组件实战：ColorPicker（二）
sybh的博客
02-17 1043
这节我们实现了 ColorPicker 的调色板。它的布局不复杂，就是一个渐变的背景，加上一个绝对定位的滑块。就是根据位置计算颜色、根据颜色计算位置，这两个方向的计算比较复杂。根据位置计算颜色，以 x 方向为例：需要用 mousemove 时的 e.pageX（距离文档左边的距离） 减去 scrollLeft 计算出滑块距离视口的距离，然后减去容器距离视口的距离，再减去滑块半径就是滑块距离容器的距离 x。然后用这个 x 除以 width 计算出 hsv 中的 s 的值。
ant desgin vue 框架使用颜色选择器
m0_65607651的博客
04-20 2741
ant desgin vue 中使用 vue-color
npm提供的颜色选择器
此人很懒，未填写博客简介
07-09 718
下载包 cnpm cnpm install vcolorpicker -S 或者 npm install vcolorpicker -S 在main.js中引入 import vcolorpicker from 'vcolorpicker' Vue.use(vcolorpicker) 组件中使用 <template> <colorPicker v-model="color" /> </template> <script> export default
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 ... 由移植到Vue3 :) 查看的演示:) 如何建造 git clone ...cd vue3-icon-picker yarn yarn dev # when you're happy with the changes yarn build 预览
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
vue-awesome-picker：一个Vue.js选择器组件
02-05
还是决定把坑填了，填坑中Vue很棒的选择器基于和的移动端选择器组件产品特点支持单列，多列和联级数据内置时间，日期数据滚轮3D效果颜色可配置演示版PS：Demo已启用服务工作者安装npm install vue-awesome-picker --...
vue-colorPicker:基于vue的轻量颜色选择器
05-05
vue-colorPicker 基于vue的轻量颜色选择器
v-colorpicker：全功能vue选色器
02-18
v-cpicker（vue选色器） 安装 npm i --save v-cpicker 在main.js中初始化 import colorpicker from "v-cpicker"; Vue.use(colorpicker); 选项（设置为：options =“ optionsObject”） compact ：（默认= false ）紧凑的布局 light ：（默认= true ）使用light主题 allowModeChange ：（ default = true ）允许简单/高级模式更改（UI上的复选框） advanced :(默认= false ）以高级模式启动 楼上的PreviewBars ：（ default = true ）预览通道值旁边的渐变条 formatPopup ：（默认= true ）显示所有格式的链接 hslToggle ：（默认= true ）显示HSL
ckcolorpicker基于Vue开发的一款颜色选择器
08-12
ck-color-picker：基于Vue开发的一款颜色选择器
antd-button-color：适用于Ant Design的简单按钮可响应更多颜色，例如主色，成功，警告，信息，深色，浅色
02-28
蚂蚁按钮颜色 Ant Design的简单按钮可响应更多颜色，例如默认，主要，成功，警告，信息，深色，浅色。 特征 按钮的颜色更多（主要，成功，警告，信息，暗，明暗，默认）。 安装 注意：安装Ant Design（必需）。 $ npm install antd //or $ yarn add antd 下一步使用npm安装： $ npm install antd-button-color 如果使用纱线： $ yarn add antd-button-color 用法 导入样式CSS或更少 //import css or less import 'antd/dist/antd.css' ; // or 'antd/dist/antd.less' import 'antd-button-color/dist/css/style.css' ; // or 'antd-button-c
ant-design-vue实现动态切换主题色
weixin_45524020的博客
03-29 3698
一、使用的插件版本 1、“ant-design-vue” 不限版本 注意：ant-design-vue是基于babel-plugin-import按需引入的，在根目录下建了babel.config.js内容如下 module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], env: { development: { plugins: ['dynamic-import-node'], }
【vue + element ui】ColorPicker 颜色选择器的使用
qq_44938769的博客
08-18 3297
自定义el-colorPicker的使用
vue3项目中-颜色选择器
m0_46562963的博客
03-31 1927
单单引入一个这个肯定不能实现我想要的效果。使用@ans1998/vue3-color。
自定义Vue颜色选择器
Jaycee的小木屋
03-22 1987
老板发来的原型图是这样的ant-design里面的颜色选择器是这样的因为每个人操作习惯不一样，后面可能会出现五颜六色的标签， 所以讨论了下，只限定一些颜色可设置。options: [},},},},},},},},},],},使用RadioButton组件举一反三。
vue 使用 vue-color-picker
05-23
Vue-color-picker是一个基于Vue.js的颜色选择器组件，它可以让用户方便地选择颜色。使用vue-color-picker可以轻松地集成颜色选择器到你的Vue项目中。 首先，你需要安装vue-color-picker。可以使用npm或yarn来安装: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值