在设置背景色的时候,使用html5 type=color 标签,但是初始值一直都是黑色的,背景如果没有设置的时候,应该是白色,比如文本图元,所以需要设置一个初始的颜色值,

注意:

value不实用,怎么修改值都不会改变

需要用default-value

注意:值得确定,不能使用关键字 如red等,还有简写的16进制颜色 需要写全  白色就是#ffffff

 
        <div class="param-gap" v-if="params.pixelType === 'EllipsePixel' ||params.pixelType === 'RectPixel'">
<label class="left" for="">填充颜色 :</label>
<div class="right">
<input class="data-value" :default-value="params.fillColor" v-model="params.fillColor" @input="updateData" type="color" />
</div>
</div>

  

input type=color 设置颜色的更多相关文章

  1. 给<input type="color">设置默认值

    参考:https://stackoverflow.com/questions/14943074/html5-input-colors-default-color?utm_medium=organic& ...

  2. [HTML5] 颜色选择器的操作[input type='color'....]

    一.点击事件和获取颜色值 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. html5 input type="color"边框伪类效果

    html5为input提供了新的类型:color <input type="color" value="#999" id="color" ...

  4. input type color

    <input type="color"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input ...

  5. 如何用css给input的placeholder设置颜色

    我在做页面的时候遇到过这种情况,在input标签中有默认字,但是设计稿上的颜色和input标签中的placeholder的默认颜色不一致.虽然我们可以在js中写出,但是有点过于麻烦了. 所以我就用cs ...

  6. input type=button设置高度不管用

    <input type="button" name="calRate" id="calRate" value="查询&quo ...

  7. <input type="date">设置默认当前日期

    日期选择器如下: <input type="date" id="start_date" name="start_date"> 注 ...

  8. 关于如何给<input type="date">设置默认当前日期的方法 和 给table固定宽度

    var ddd = new Date(); var day =ddd.getDate(); if(ddd.getMonth()<10){ var month = "0"+(d ...

  9. HTML5的input color系统颜色选择器

    前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...

随机推荐

  1. Winform 工程反编译后窗体如何显示

    Winform反编译后,如果想要让它象正常的工程一样,可以在窗体编辑器中,编辑,需要做一些工作. 1.  转换.resources 为 .resx 利用resgen工具.这个工具是vs自带的. 在启动 ...

  2. Facebook币Libra学习-5.Move组织目录

    Move是一种新的编程语言,旨在为Libra Blockchain提供安全可编程的基础. 组织 Move语言目录由五部分组成: 的虚拟机(VM),其中包含的字节码格式,字节码解释器,和基础设施执行事务 ...

  3. Android中实现日期时间选择器(DatePicker和TimePicker)

    利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...

  4. 下了个pkg包的jenkins,的使用方法

    三.如何启动Jenkins1.最简单的方法是双击Jenkins的pkg包,一步一步点同意,默认8080端口2.使用命令行启动打开terminal,进入到war包所在目录,执行命令: java -jar ...

  5. RegexBuddy 4.7.0 x64 评估试用到期,无限试用的办法

    http://www.cnblogs.com/inrg/p/6491043.html 最后对比发现,在注册表 HKEY_USERS 节点下存在一个用户的项,形如 "S-1-5-21-1609 ...

  6. node.js运行内存堆溢出的解决办法

    我是在将一组80多列13万多行的数据通过node-xlsx的时候出现的内存堆溢出的情况. 解决办法时将: node app.js 改成: node --max_old_space_size=10000 ...

  7. 【leetcode_easy】530. Minimum Absolute Difference in BST

    problem 530. Minimum Absolute Difference in BST 参考 1. Leetcode_easy_530. Minimum Absolute Difference ...

  8. postman+jmeter接口实例

    接口基础 一.为什么要单独测试接口? 1. 程序是分开开发的,前端还没有开发,后端已经开发完了,可以提前进入测试2. 接口直接返回的数据------越底层发现bug,修复成本是越低的3. 接口测试能模 ...

  9. Centos7系统下以RPM方式如何安装mysql-5.7

    检查系统是否装有mariadb rpm -qa | grep mariadb 卸载mariadb 强制卸载mariadb rpm -e --nodeps mariadb-libs-5.5.35-3.e ...

  10. Reactor系列(四)subscribe订阅

    #java# #reactor# #subcribe# #订阅# 视频讲解 :https://www.bilibili.com/video/av79117693/ FluxMonoTestCase.j ...