vue项目中使用颜色选择器 |
您所在的位置:网站首页 › vue背景颜色 › vue项目中使用颜色选择器 |
颜色选择器
引言type类型为color的input示例
elementUI中的ColorPicker组件vcolorpicker插件示例
引言
关于颜色选择器,我是用过三种,一个是HTML5新增的,一个是elementUI中的ColorPicker组件,一个是基于Vue的颜色选择器插件vcolorpicker type类型为color的input在旧版IE浏览器上不支持该标签。该标签的显示效果如下 在Google Chrome和Microsoft Edge上,该标签的显示效果如下
与其他input标签相同,也有两个和值的改变相关的事件,input和change,可以对值进行操作 示例 export default { name: "ColorPicker", data() { return { color: '#778899' }; } }; body { font-size: 14px; line-height: 1.5; color: #515a6e; background-color: #fff; } elementUI中的ColorPicker组件他的颜色面板显示效果如下 elementUI文档中对ColorPicker组件的描述足够详细 但是我在使用该组件的时候发现他存在着缺陷,当我在一个页面引入多个ColorPicker组件时,就会出现颜色面板无法正常选择颜色,找度娘翻了很多博客都没有人提到这个问题,关于这点如果有小伙伴也遇到过可以在评论区参与讨论 vcolorpicker插件官网 该插件是一个基于 Vue 的颜色选择器插件,他的颜色面板显示如下 在支持 html5 input[type=‘color’] 的浏览器实现了「更多颜色」的功能 所以点击更多颜色弹出的颜色面板参考在不同浏览器的显示效果 示例安装 npm install vcolorpicker -Smain.js注册 import vcolorpicker from 'vcolorpicker' Vue.use(vcolorpicker)使用 export default { name: "ColorPicker", data() { return { color: '#778899' }; }, methods: { headleChangeColor(){ console.log("颜色发生改变") //颜色改变之后相关操作... }, } }; body { font-size: 14px; line-height: 1.5; color: #515a6e; background-color: #fff; }HTML5新增属性 ↩︎ ↩︎ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |