一、demo效果

二、使用步骤

1.安装vue-color插件

在终端窗口中输入以下命令安装插件
npm install vue-color

2.引入组件Sketch

使用import语法引入Sketch组件
import { Sketch } from 'vue-color'

3.注册组件

  components: {'sketch-picker': Sketch},

4.在html部分使用组件

<sketch-picker v-model="color" @input="updateValue"></sketch-picker>

5.处理点击事件

// 颜色输入框点击事件处理colorInputClick () {this.isShowColors = !this.isShowColors},// 颜色值改变事件处理colorValueChange (val) {console.log(val)// 取颜色对象的十六进制值this.color = val.hex}

三、demo代码

<template><el-col class="controls-box"><el-col :span="8" class="label-col"><label>请选择颜色</label></el-col><el-col :span="16"><div @click="colorInputClick"><el-input disabled :value="color" @click="colorInputClick"></el-input></div><div v-show="isShowColors" class="color-select-layer"><sketch-picker v-model="color" @input="colorValueChange"></sketch-picker></div></el-col></el-col>
</template>
<script>
import { Sketch } from 'vue-color'
export default {components: {'sketch-picker': Sketch},data () {return {isShowColors: true,color: '#3f3f3f'}},methods: {// 颜色输入框点击事件处理colorInputClick () {this.isShowColors = !this.isShowColors},// 颜色值改变事件处理colorValueChange (val) {console.log(val)// 取颜色对象的十六进制值this.color = val.hex}}
}
</script><style>
.controls-box {position: absolute;left: 150px;top: 50px;width: 300px;padding: 10px;background-color: #fafafa;border: 1px solid #c3c3c3;border-radius: 5px;
}
.label-col {padding: 8px 5px;
}
.color-select-layer {position: relative;left: -36px;top: 10px;padding: 15px 0;
}
</style>

vue-color插件取色器拾色器使用示例，vue实用demo颜色选择器Sketch组件使用，vue中选色板使用示例相关推荐

PS学习笔记——拾色器和色彩空间
作为绘图.修改.色彩调整的基础,拾色器是一个非常重要的工具.如果颜色不存在于画面上或图像内,而是需要人为设定,就需要使用拾色器. 位于工具面板下方,可以看到前景色/背景色选项.或者可以打开色板面板和颜 ...
vue吸管拾色器、利用canvas获取坐标点颜色、canvas获取坐标点颜色图片跨域、图片转base64、colorPicker
vue吸管拾色器.利用canvas获取坐标点颜色.canvas获取坐标点颜色图片跨域.图片转base64.colorPicker 1.需求:表格中主颜色和次颜色是需要从缩略图上吸取颜色,然后渲染色块, ...
原生js实现的拾色器插件 - ColorPicker
对一个前端来说,颜色选择的插件肯定不陌生,许多小伙伴对这类插件的实现可能会比较好奇.这里奉上原生js版本的拾色器,由于是本人纯手工撸出来的,所以转载还请标明来源. 效果图: 讲下实现方式: 1.颜色除 ...
使用Vue.js的简单拾色器
选色器 (vue-colorpicker) A Simple Color Picker With Vue.js 使用Vue.js的简单拾色器 View demo 查看演示 Download Sourc ...
一款免安装、多平台兼容的拾色器(Color Picker)
文章目录视频教程场景需求场景需求 Chrome Google DevTools 中的拾色器用法其他浏览器视频教程浏览器自带的拾色器ColorPicker使用场景需求场景我是一个 ...
拾色器插件 Farbtastic
基本用法 1.引入 farbtastic.js 和 farbtastic.css(注:基于jquery的,先把jquery引进去,css包含三张图别忘了设置正确路径,不然只能看到一个方块) <s ...
Python3制作鼠标拾色器并显示十六进制数值（有单独窗口显示取色）
Python3制作鼠标拾色器并显示十六进制数值(有单独窗口显示取色) 代码如下,结合OpenCV的鼠标事件,窗体大小的调整,我们可以轻松地制作拾色器并进行显示: import cv2import nu ...
Mac上的取色器（拾色器）的比较 - 正版Mac版的取色器软件
当我们看到某个网页上的颜色很适合做我们的网站页面的颜色时,我们会很快地想到微信.钉钉截图里的放大镜自带的取色功能.但是,你知道以下这个事实吗? Mac版的微信.Mac版的钉钉的取色器取到的颜色并不准确 ...
Android Studio设置颜色拾色器工具Color Picker
你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取颜色: 你可能也知道Android Studio自带一个颜色拾色器,通过下面 ...

vue-color插件取色器拾色器使用示例，vue实用demo颜色选择器Sketch组件使用，vue中选色板使用示例

一、demo效果

二、使用步骤

1.安装vue-color插件

2.引入组件Sketch

3.注册组件

4.在html部分使用组件

5.处理点击事件

三、demo代码

vue-color插件取色器拾色器使用示例，vue实用demo颜色选择器Sketch组件使用，vue中选色板使用示例相关推荐

最新文章

热门文章