一款支持vue3 的颜色选择器

特点

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

安装

npm i colorpicker-v3

使用

在main中注册组件

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

import { createApp } from 'vue'
import App from './App.vue'
import ColorPicker from 'colorpicker-v3'  // 注册组件
import 'colorpicker-v3/dist/style.css' // 引入样式文件
const app = createApp(App)
app.use(ColorPicker)
app.mount('#app')

组件中使用

vue3 + js


<template><color-picker @change="change" :value="color"></color-picker>
</template><script setup>
import { ref } from 'vue';
const color = ref("#ffffff");
const colorRgba = ref("#eeeeee")
const change = (e) => {console.log(e)colorRgba.value = e.rgba
}
</script><style>
</style>

vue+ts+setup


<template><color-picker @change="change" :value="color"></color-picker>
</template><script setup lang="ts">import { ref } from 'vue';
const color = ref("#ffffff");
const colorRgba = ref("#eeeeee")
const change = (e) => {console.log(e)colorRgba.value = e.rgba
}
</script><style>
</style>

Props

参数名	描述	类型	默认值	备注
value	初始化颜色值	string	#000000	使用完整的16进制值
btnStyle	设置颜色块样式	Object	-	-
opacity	颜色透明度初始值	numer	100	0~100 数值越小透明度越低
show-opacity	是否显示透明度控制块	boolean	true
standard-color	标准色初始化配置	`Array<string>`	standard-clolor详情	使用完整的hex16 进制值
theme-color	主题色初始化配置	`Array<string>`	theme-clolor详情	使用完整的hex16 进制值

standard-clolor

const standardClolor = ['#c21401','#ff1e02','#ffc12a','#ffff3a','#90cf5b','#00af57','#00afee','#0071be','#00215f','#72349d',
]

主题色theme-clolor

const themeClolor =['#000000','#ffffff','#eeece1','#1e497b','#4e81bb','#e2534d','#9aba60','#8165a0','#47acc5','#f9974c',]

Events

事件名	描述	参数	返回值
change	颜色值改变时触发	data: {hex:string,rgba: string}	-
finish	点击完成按钮	data: {hex:string,rgba: string}	-
close	选色面板关闭	data: {hex:string,rgba: string}	-

使用示例

<template><color-picker:value="color"@change="change":standard-color="bColor"@close="close"@finish="finish"></color-picker>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({name: ''
})
</script>
<script lang="ts" setup>
const color = ref("")
const colorValue = ref({})//  颜色值改变
const change = (e) => {// console.log("e", e)colorValue.value = e
}// 颜色面板关闭
const close = (e) => {console.log("关闭了", e)
}const finish = (e) => {console.log("点击完成", e)
}const bColor = ['#c21401','#ff1e02','#ffc12a','#ffff3a','#90cf5b','#00af57','#00afee','#0071be','#00215f','#72349d',
]
</script>
<style lang="less" scoped>
</style>

一款支持vue3 的颜色选择器相关推荐

颜色选择器vue3-colorpicker
其他选择器:一款支持vue3 的颜色选择器 | ColorPickerV3基于vue3的颜色选择器支持颜色透明度与rgba.hexhttps://colorpickerv3.wcrane.cn/gui ...
好用的前端组件-颜色选择器
一.官网一款支持vue3 的颜色选择器 | ColorPickerV3 二.效果三.感受可以用于移动端,但是得调整弹框的位置,否则可能部分区域在界面外(截至2022-12-12是这样). 支持V ...
vite打包快几款基于vue3和vite的开箱即用的中后台管理模版
vite打包快的原因: 冷启动 1.esbuild构建依赖,go语言编写多线程打包. 2.原生的esm方式提供源码,浏览器分担了一部分工作. HMR热更新 1.缓存机制,利用浏览器http头部,源码模 ...
vue-color-picker-sheldon使用说明（一款基于Vue的取色器/颜色选择器）
vue-color-picker-sheldon使用说明(一款基于Vue的取色器/颜色选择器) Introduction 简介 Functions 功能点 Install 安装 Usage 用法 CS ...
Vue - 高效稳定的颜色选择器组件（支持鼠标拖动选择与手动输入16进制、rgb颜色值）
前言在 Vue.js 项目中,很可能需要用到颜色选择器. 本文带您从 0-1 完成颜色选择器组件的引入及使用, 代码干净整洁,提供多个示例,复制改造一下就能用:
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云
本文首发:<最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云> Vue 时间日期选择器(date-timepicker)组件在使用 Vue 框架开发中使 ...
android类中定义颜色,自定义实现简单的Android颜色选择器（附带源码）
在写Android App过程中需要一个简单的颜色选择器,Android自带的ColorPicker和网上的一些ColorPicker都太高端了,都实现了颜色渐变功能,我要的不需要那么复杂,只想提供几 ...
HTML5的input color系统颜色选择器
前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...
html颜色块选择器,ColorPick:网页颜色选择器
ColorPick Eyedropper开发背景在网页设计当中网页的色彩是个难题,你可能经常会遇到需要取到网页某个部分的颜色,但是单单为了取色而打开ps就太大材小用了.之前我们介绍过一款Chrome ...
html简易颜色选择器,HTML颜色选择器实现代码
HTML颜色选择器实现代码 HTML颜色选择器范围:#000 - #FFF // '); } document.writeln(' '); var begin = 0; for (var i = ...

一款支持vue3 的颜色选择器

一款支持vue3 的颜色选择器

特点

安装

使用

在main中注册组件

组件中使用

vue3 + js

vue+ts+setup

Props

standard-clolor

主题色theme-clolor

Events

使用示例

一款支持vue3 的颜色选择器相关推荐

最新文章

热门文章