vue项目中使用颜色选择器
颜色选择器引言type类型为color的inputelementUI中的ColorPicker组件vcolorpicker插件引言关于颜色选择器,我是用过三种,一个是HTML5新增的<input type="color">,一个是elementUI中的ColorPicker组件,一个是基于Vue的颜色选择器插件vcolorpickertype类型为color的inputelementU
引言
关于颜色选择器,我是用过三种,一个是HTML5新增的<input type="color">
,一个是elementUI中的ColorPicker
组件,一个是基于Vue的颜色选择器插件vcolorpicker
type类型为color的input
<input type="color">
在旧版IE浏览器上不支持该标签。该标签的显示效果如下
在Google Chrome和Microsoft Edge上,该标签的显示效果如下
他有三种显示颜色的方式:
1、RGB(例如:rgb(203,26,26),如下图所示)
2、HSL(例如:hsl(0,77%,45%),如下图所示)
3、HEX(即十六进制颜色码)(例如:#CB1A1A,如下图所示)
在Firefox上,该标签的显示效果如下
效果基本无差,但是点击打开颜色面板,我们就发现样式截然不同了
对于该标签,我们来看一下他的属性
属性 | 描述 |
---|---|
value | 颜色选择器默认选择的颜色,可以是十六进制颜色码,可以是RGB颜色码,可以是HSL颜色码,也可以是RGBA颜色码 |
name | 和表单一起提交的颜色选择器的name |
disabled | 颜色选择器是否不可用于交互。disabled时的值不会随表单提交。 |
autocomplete1 | 设置颜色区域的autocomplete值。如果为true,则将自动填充颜色选择器上次存储的值。 |
autofocus1 | 页面加载时自动获取焦点 |
与其他input标签相同,<input type="color">
也有两个和值的改变相关的事件,input和change,可以对值进行操作
示例
<template>
<div id="colorPicker">
<input type="color" v-model="color">
</div>
</template>
<script>
export default {
name: "ColorPicker",
data() {
return {
color: '#778899'
};
}
};
</script>
<style>
body {
font-size: 14px;
line-height: 1.5;
color: #515a6e;
background-color: #fff;
}
</style>
elementUI中的ColorPicker组件
他的颜色面板显示效果如下
elementUI文档中对ColorPicker组件的描述足够详细
ColorPicker 颜色选择器
该组件的安装使用参考
安装elementUI和引用elementUI组件
但是我在使用该组件的时候发现他存在着缺陷,当我在一个页面引入多个ColorPicker组件时,就会出现颜色面板无法正常选择颜色,找度娘翻了很多博客都没有人提到这个问题,关于这点如果有小伙伴也遇到过可以在评论区参与讨论
vcolorpicker插件
官网
该插件是一个基于 Vue 的颜色选择器插件,他的颜色面板显示如下
在支持 html5 input[type=‘color’] 的浏览器实现了「更多颜色」的功能
所以点击更多颜色弹出的颜色面板参考<input type="color">
在不同浏览器的显示效果
示例
安装
npm install vcolorpicker -S
main.js注册
import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker)
使用
<template>
<div id="colorPicker">
<colorPicker class="color-picker" v-model="color" v-on:change="headleChangeColor" />
</div>
</template>
<script>
export default {
name: "ColorPicker",
data() {
return {
color: '#778899'
};
},
methods: {
headleChangeColor(){
console.log("颜色发生改变")
//颜色改变之后相关操作...
},
}
};
</script>
<style>
body {
font-size: 14px;
line-height: 1.5;
color: #515a6e;
background-color: #fff;
}
</style>
更多推荐
所有评论(0)