颜色选择器

隔壁老王小媳妇

已于 2023-07-28 14:55:04 修改

阅读量309

点赞数 1

文章标签： javascript 前端 vue.js

于 2023-03-08 10:39:56 首次发布

本文链接：https://blog.csdn.net/weixin_41013537/article/details/129398134

版权

本文介绍了作者编写的color-picker-plus插件，它支持hsl、rgba、rgb和hex颜色模式。提供了npm安装方式、组件使用示例以及配置选项。用户可以通过useColor方法进行定制，如设置默认颜色和常用色块。

摘要由CSDN通过智能技术生成

话不多说，先上效果图

npm地址：color-picker-plus - npm

支持hsl模式,rgba,rgb,hex模式几种类型的颜色返回

安装方法


npm i color-picker-plus

使用方法


<template>
   <div class="w-[160px] mt-[50px] ml-[20px] ">
        <ColorPicker @register="register" v-model:value="color">
       </ColorPicker>
   </div>
</template>
<script>
   import {ColorPicker,useColor} from 'color-picker-plus';
   const color= ref()
    const[register]=useColor({
       type:'hsl', //类型，在下面props里面有说明
       usuallyColorBlock:['#FF0000', '#55FF00', '#0015FF'], //常用的色块
       defaultColor:'#f50' //默认选中颜色 可以为color
    )
</script>

配置项