使用Vue.js的简单拾色器

选色器 (vue-colorpicker)

A Simple Color Picker With Vue.js

使用Vue.js的简单拾色器

View demo 查看演示 Download Source 下载源

安装 (Install)

$ yarn add @caohenghu/vue-colorpicker

例 (Example)

<template><div :style="{background: color}"><color-picker:color="color":sucker-hide="false":sucker-canvas="suckerCanvas":sucker-area="suckerArea"@changeColor="changeColor"@openSucker="openSucker"/></div>
</template><script>import colorPicker from '@caohenghu/vue-colorpicker'export default {components: {colorPicker},data() {return {color: '#59c7f9',suckerCanvas: null,suckerArea: [],isSucking: false}},methods: {changeColor(color) {const {rgba: {r, g, b, a}} = colorthis.color = `rgba(${r, g, b, a})`},openSucker(isOpen) {if (isOpen) {// ... canvas be created// this.suckerCanvas = canvas// this.suckerArea = [x1, y1, x2, y2]} else {// this.suckerCanvas && this.suckerCanvas.remove}}}}
</script>

选件 (Options)

name	type	default	desc
color	String	`#000000`	`rgba` or `hex`
colors-default	Array	`['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']`	like `['#ff00ff', '#0f0f0f', ...]`
colors-history-key	String	`vue-colorpicker-history`
sucker-hide	Boolean	`true`	`true` or `false`
sucker-canvas	HTMLCanvasElement	`null`	like `document.createElement('canvas')`
sucker-area	Array	`[]`	like `[x1, y1, x2, y2]`

名称	类型	默认	描述
颜色	串	`#000000`	`rgba`或`hex`
颜色默认	数组	`['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']`	像`['#ff00ff', '#0f0f0f', ...]`
颜色历史键	串	`vue-colorpicker-history`
隐藏的	布尔型	`true`	`true`还是`false`
抽油画布	HTMLCanvasElement	`null`	像`document.createElement('canvas')`
吸盘区	数组	`[]`	像`[x1, y1, x2, y2]`

color is one-way data flow, so you can't use v-model. why? because you'll listen change event do more things, so i think it's not necessary here.

颜色是单向数据流，因此您不能使用v模型。为什么？因为您会听更改事件做更多的事情，所以我认为这里没有必要。

大事记 (Events)

name	type	emit args	desc
changeColor	Function	color	`{ rgba: {}, hsv: {}}`
openSucker	Function	isOpen	`true` or `false`

名称	类型	发出参数	描述
换颜色	功能	颜色	`{ rgba: {}, hsv: {}}`
openSucker	功能	开了	`true`还是`false`

if you want use sucker, then openSucker, sucker-hide, sucker-canvas, sucker-area is necessary.

如果要使用吸盘，则openSucker ， sucker-hide ， sucker-canvas ， sucker-area是必需的。

翻译自: https://vuejsexamples.com/color-picker-with-vue-js/

使用Vue.js的简单拾色器相关推荐

原生js实现的拾色器插件 - ColorPicker
对一个前端来说,颜色选择的插件肯定不陌生,许多小伙伴对这类插件的实现可能会比较好奇.这里奉上原生js版本的拾色器,由于是本人纯手工撸出来的,所以转载还请标明来源. 效果图: 讲下实现方式: 1.颜色除 ...
vue吸管拾色器、利用canvas获取坐标点颜色、canvas获取坐标点颜色图片跨域、图片转base64、colorPicker
vue吸管拾色器.利用canvas获取坐标点颜色.canvas获取坐标点颜色图片跨域.图片转base64.colorPicker 1.需求:表格中主颜色和次颜色是需要从缩略图上吸取颜色,然后渲染色块, ...
js html颜色代码,原生js编写的浏览器安全色网页拾色器色盘生成颜色代码
原生js编写的浏览器安全色网页拾色器 by js.alixixi.com #abc-colorPicker .colorPick-close,#filter-colorPicker .colorPic ...
原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
安卓自定义时间选择器_微信小程序拾色器（颜色选择器）组件
点击上方"极客小寨",选择"置顶公众号" 第一时间关注程序猿(媛)身边的故事大家好,我是独立开发者东东,如今在web项目中不少地方需要用到颜色选择器,比如设置 ...
vue.js更改颜色_如何使用Vue.js实现简单的标题更改应用程序
vue.js更改颜色 by Anoob Bava 通过Anoob Bava 如何使用Vue.js实现简单的标题更改应用程序 (How to implement a simple title chang ...
UE4拾色器的实现，使用UE4自带的SColorPicker
我就奇怪了,csdn搞个资源这么难?链接: https://pan.baidu.com/s/1sn70iyT6mp89xmsgUVmDxg 提取码: 2yk2 这总有了吧(2020年7月3日22:14 ...
拾色器插件 Farbtastic
基本用法 1.引入 farbtastic.js 和 farbtastic.css(注:基于jquery的,先把jquery引进去,css包含三张图别忘了设置正确路径,不然只能看到一个方块) <s ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...

使用Vue.js的简单拾色器

选色器 (vue-colorpicker)

安装 (Install)

例 (Example)

选件 (Options)

大事记 (Events)

使用Vue.js的简单拾色器相关推荐

最新文章

热门文章