vue插件颜色选择器

1.vcolorpicker使用方法

官方地址：http://vue-color-picker.rxshc.com/

图例：

/* main.js */
// 颜色选择器
import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker)

<!--system.vue-->
<template><colorPicker v-model="color" @change="handleChangeColor"></colorPicker>
</template>
<script>
export default {name: 'system',data () {return {color: #000;}},methods:{handleChangeColor (val) {console.log('输出颜色值',val)  // 颜色 #6c8198},}
</script>

2.vue-color使用方法

安装地址：https://www.npmjs.com/package/vue-color

图例：

这里只介绍怎么使用Sketch，其他的照摸样画葫芦

网页截图：

功能介绍：

点击左边颜色块，可打开关闭颜色选择器

<!-- system.vue-->
<template><section><div class="color_con" :style="{background:color}" @click="handleShowColor"></div><div v-show="colorShow"><sketch-picker v-model="tableData.color" @input="updateValue"></sketch-picker></div></section>
</template>
<script>
import { Sketch } from 'vue-color'
export default {name: 'system',components: {'sketch-picker': Sketch},data () {return {color: #000;// 颜色选择器colorShow: false,colors: {hex: '#194d33',hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },rgba: { r: 25, g: 77, b: 51, a: 1 },a: 1}}},methods:{// 颜色选择器handleShowColor () {if (this.colorShow) {this.colorShow = false} else {this.colorShow = true}},updateValue (val) {console.log('颜色选择', val) // 输出参数如下图1-1this.color = val.hex},}
</script>

截图

图1-1

有错请指正！！！

vue插件颜色选择器相关推荐

vue颜色选择器_如何制作？ Vue的颜色选择器！
vue颜色选择器 by ZAYDEK 由ZAYDEK 如何制作? Vue的颜色选择器! (How to make a ? color picker with Vue!) 注意:颜色看起来可能比实际颜色 ...
基于vue的颜色选择器vue-color-picker
项目中有用到颜色选择器的童鞋们可以看过来了关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...
在vue中实现picker样式_基于vue的颜色选择器vue-color-picker
/** * author : alex * email : 961163829@qq.com*/exportdefault{ props:{/*由父组件传递的默认颜色*/defaultColor:{ ...
VUE颜色选择器插件vColorPicker
VUE颜色选择器插件vColorPicker 官网 vColorPicker官网跳转一.安装 npm install vcolorpicker -S 二.在 main.js 文件中引入插件并注册 / ...
10个精选的颜色选择器Javascript脚本及其jQuery插件
Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本实现及其传说中的jQuery插件实现 ...
11个JavaScript颜色选择器插件
1. ExColor ExColor是一个类似Photoshop样式的jQuery颜色拾取插件,其定制性非常高,通过参数设置可生成各种样式和效果的颜色拾取器.它可以附加到任意的input输入框,通过简 ...
vue-color-picker-sheldon使用说明（一款基于Vue的取色器/颜色选择器）
vue-color-picker-sheldon使用说明(一款基于Vue的取色器/颜色选择器) Introduction 简介 Functions 功能点 Install 安装 Usage 用法 CS ...
自定义Vue颜色选择器
需求是新建标签,并且带上颜色,项目用的是element ui组件库,自带的<el-color-picker>与需求不符,所以自定义了一个. 目录前言一.思路二.编码 1.定义颜色数组 ...
uniapp颜色选择器插件
颜色选择器地址 https://ext.dcloud.net.cn/plugin?id=403 导入 /* 颜色选择器 */ import pickerColor from '@/component ...
Vue - 高效稳定的颜色选择器组件（支持鼠标拖动选择与手动输入16进制、rgb颜色值）
前言在 Vue.js 项目中,很可能需要用到颜色选择器. 本文带您从 0-1 完成颜色选择器组件的引入及使用, 代码干净整洁,提供多个示例,复制改造一下就能用:

vue插件颜色选择器

1.vcolorpicker使用方法

官方地址：http://vue-color-picker.rxshc.com/

图例：

2.vue-color使用方法

安装地址：https://www.npmjs.com/package/vue-color

图例：

网页截图：

功能介绍：

截图

有错请指正！！！

vue插件颜色选择器相关推荐

最新文章

热门文章