在设置背景色的时候,使用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. 美国top200药品2

     python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&u ...

  2. github上有对应官方的各种模型

    https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/detection_model_zoo ...

  3. TensorFlow Object Detection API —— 制作自己的模型

    https://blog.csdn.net/qq_24474463/article/details/81530900 (t20190518) luo@luo-All-Series:~/MyFile/T ...

  4. 共享打印机,错误0x80070035和错误0x00000709的解决办法

    这两个错误可以说是共享打印机里经常出现的错误了. 首先,要确认客户机可以ping通打印机的直连电脑的IP,如果这一步不通,那别玩了. 其次,很多人会忽略的一点儿,两个电脑的dns最好设置为相同的,经测 ...

  5. [译] NAT - 网络地址转换(2016)

    [译] NAT - 网络地址转换(2016) Published at 2019-02-17 | Last Update 译者序 本文翻译自 2016 年的一篇英文博客 NAT - Network A ...

  6. windows进入指定目录

    1.进入cmd 2.输入盘符比如:E: 3.切换目录 cd E:\progect\Firstdjango 实例:

  7. golang的下载与安装

    golang的官网可能由于政策原因登陆不上. 所以可以到Go语言中文网下载:https://studygolang.com/dl 我下载的是go1.10.3.windows-amd64.msi安装包, ...

  8. STM32第二章I/O端口应用

    STM32F10xxx系列中,有7个I/O端口,每个端口有两个32位配置寄存器(GPIOx_CRL,GPIOx_CRH),两个32位数据寄存器(GPIOx_IDR和GPIOx_ODR),一个32位置位 ...

  9. 攻防世界CRYPTO新手练习

    0x01 base64 直接base64 Decode 得到flag cyberpeace{Welcome_to_new_World!} 0x02 Caesar key为12 的恺撒密码,解密德fla ...

  10. 关于 layer.open 动态赋值不了的问题

    前情: layer.open({ type:1, // 用的是默认的信息弹框 content: $('#test'), // 这里不用 $('#test').html(), 不然后面获取不了值 }); ...