自定义Vue颜色选择器
创始人
2025-06-01 17:11:25
0次

需求是新建标签，并且带上颜色，项目用的是ant-design组件库，自带的与需求不符，所以自定义了一个。

目录

前言

一、思路

二、编码

1.定义颜色数组

2.通过颜色编码动态渲染item背景色

3.通过getColor获取值

三、使用

1.组件源码

2.引用

总结

前言

老板发来的原型图是这样的

 ant-design里面的颜色选择器是这样的

因为每个人操作习惯不一样，后面可能会出现五颜六色的标签， 所以讨论了下，只限定一些颜色可设置。

一、思路

其实这种就自定义RadioButton的改版，只需要把数据换一下就行了

二、编码

1.定义颜色数组

predefineColors: {options: [{text: '#F45B5A',value: '#F45B5A',},{text: '#FFCB45',value: '#FFCB45',},{text: '#FF8A4E',value: '#FF8A4E',},{text: '#6ABF40',value: '#6ABF40',},{text: '#3D96FF',value: '#3D96FF',},{text: '#00DAE0',value: '#00DAE0',},{text: '#5D5CDB',value: '#5D5CDB',},{text: '#B44D5F',value: '#B44D5F',},{text: '#c71585',value: '#c71585',},],},

2.通过颜色编码动态渲染item背景色

核心在这句

        :style="{ background: item.text }"

3.通过getColor获取值

不再赘述

三、使用

1.组件源码

ColorPicker.vue

2.引用

predefineColors定义在文章开头了。

总结

使用RadioButton组件举一反三。

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：uniapp 微信小程序多环境配置及使用

下一篇：JDBC

相关内容

热门资讯

诗经里采薇的意思 诗经里采薇的意思　　《小雅·采薇》是中国古代现实主义诗集《诗经》中的'一篇。这是一首戎卒返乡诗，唱出...
《临终歌》李白唐诗注释翻译赏... 《临终歌》李白唐诗注释翻译赏析　　作品原文　　临终歌　　[唐]李白　　大鹏飞兮振八裔，中天摧兮力不济...
陶渊明归园田居·其三原文翻译... 陶渊明归园田居·其三原文翻译及赏析　　赏析，是一个汉语词汇，意思是欣赏并分析（诗文等），通过鉴赏与分...
平凡的世界价值 平凡的世界价值　　下面是小编整理的《平凡的世界》三部曲中的价值追求，有兴趣的朋友可以看一下。　　《平...
《论语·卫灵公》阅读题答案 《论语·卫灵公》阅读题答案　　①子贡问曰：“有一言而可以终身行之乎？”子曰：“其恕乎！己所不欲，勿施...
《杨嗣昌》阅读答案及译文赏析 《杨嗣昌》阅读答案及译文赏析　　无论是在学校还是在社会中，我们总免不了要接触或使用阅读答案，阅读答案...
《论语》的文言现象 《论语十则》的文言现象　　导语：《论语》集中了孔子的主要思想，是孔子弟子收集整理而成的著作。下面是《...
洞仙歌·丁卯八月病中作_辛弃... 洞仙歌·丁卯八月病中作_辛弃疾的词原文赏析及翻译　　洞仙歌·丁卯八月病中作　　宋代辛弃疾　　贤愚相去...
《易经》与中国文化心理 《易经》与中国文化心理　　在我们中国的文化传统中，《易经》素有“众经之首”和“大道之源”的称誉，当代...
说苑尊贤原文及翻译 说苑尊贤原文及翻译　　导语：《说苑》又名《新苑》，古代杂史小说集，刘向编纂，成书于鸿嘉四年（前17）...
《韩非子·难一》原文及翻译 《韩非子·难一》原文及翻译　　原文　　楚人有鬻矛与盾者，誉之曰：“吾盾之坚，物莫能陷也。”又誉其矛曰...
饮湖上初晴后雨庞岩 饮湖上初晴后雨庞岩　　《饮湖上初晴后雨》是庞岩演唱的一首歌，由唐诗《饮湖上初晴后雨》演变而来的，下面...
文言文《师说》原文翻译 文言文《师说》原文翻译　　《师说》作于唐贞元十八年(公元802年)韩愈任四门博士时，是说明教师的重要...
细柳营的翻译及原文 细柳营的翻译及原文　　上自劳军。至霸上及棘门军，直驰入，将以下骑送迎。已而之细柳军，军士吏被甲，锐兵...
文言文桃花源记翻译 文言文桃花源记翻译　　导语：桃花源是一种意境,是一种理想,是一个美梦,是一个精神乐园.未必要苦苦寻求...
《西江月·明月别枝惊鹊》辛弃... 《西江月·明月别枝惊鹊》辛弃疾宋词注释翻译赏析　　作品原文　　西江月·夜行黄沙道中　　辛弃疾　　明月...
《鱼我所欲也》《万事莫贵于义... 《鱼我所欲也》《万事莫贵于义》比较阅读　　《鱼我所欲也》《万事莫贵于义》比较阅读　　【甲】鱼，我所欲...
你是人间的四月天原文 你是人间的四月天原文　　黄昏吹着风的软，星子在无意中闪，细雨点洒在花前。下面是小编整理的范文，欢迎查...
读《桃花源记》有感 读《桃花源记》有感(通用15篇)　　读完一本名著以后，想必你一定有很多值得分享的心得，是时候抽出时间...
《滕王阁序》全诗及名句赏析 《滕王阁序》全诗及名句赏析　　无论是在学校还是在社会中，大家总少不了接触作文吧，通过作文可以把我们那...