在设置背景色的时候,使用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. 分布式系统的应用程序性能监视工具,专为微服务、云本机架构和基于容器(Docker、K8s、Mesos)架构而设计。 SkyWalking

    Apache SkyWalking™ | SkyWalking Teamhttp://skywalking.apache.org/zh/ Application performance monitor ...

  2. 关于Intel处理器架构中AVX2里Gather特性的说明

    在Intel Haswell架构里引入了Gather特性.它使得CPU可以使用向量索引存储器编址从存储器取非连续的数据元素.这些gather指令引入了一种新的存储器寻址形式,该形式由一个基地址寄存器( ...

  3. OSG Qt Widget加载三维模型

    graphicswindowqt.h #ifndef GRAPHICSWINDOWQT_H #define GRAPHICSWINDOWQT_H #include <QGLWidget> ...

  4. Build Telemetry for Distributed Services之Jaeger

    github链接:https://github.com/jaegertracing/jaeger 官网:https://www.jaegertracing.io/ Jaeger: open sourc ...

  5. Java中遍历Map的四种方式

    Demo如下 Map<String, String> map = new HashMap<>(); map.put("key1","data1&q ...

  6. SpringBoot: 14.异常处理方式4(使用SimpleMappingExceptionResolver处理异常)(转)

    修改异常处理方法3中的全局异常处理Controller即可 package bjsxt.exception; import org.springframework.context.annotation ...

  7. Eureka报错: Connect to localhost:8761 timed out

    最近整理配置Eureka时, 注册服务后, Eureka服务一直报出如下错误: 如下是我的单台eureka的 application.yml 配置: spring: application: name ...

  8. 用CapsNets做电能质量扰动分类(2019-08-05)

    当下最热神经网络为CNN,2017年10月,深度学习之父Hinton发表<胶囊间的动态路由>(Capsule Networks),最近谷歌正式开源了Hinton胶囊理论代码,提出的胶囊神经 ...

  9. 华为ENSP命令大全

    实验命令___ENSP   一. 生成树STP 注:桥优先级取值越小,则优先级越高,通过配置优先级(开销值cost)可控制根桥选举.当根桥发生故障则会选举新的根桥,当故障恢复根桥重新选举.通过设置端口 ...

  10. Python学习笔记——pickle 模块

    由于从文本文件中读取出来的内容都会变成字符串,且转换成列表.字典等数据类型比较困难,因此采用pickle模块存储它们 import pickle my_list = [123,3.14,'小甲鱼',[ ...