• vue制作自己心仪的颜色仪表盘

    代码：

    2. html>
    3. <html lang="en">
    4.  
    5. <head>
    6.     <meta charset="UTF-8">
    7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.     <title>颜色表title>
    10.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    11.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10">script>
    12.     <script src="https://www.itxst.com/package/clipboardjs/clipboard.min.js">script>
    13.     <script src="https://unpkg.com/element-ui/lib/index.js">script>
    14.     <style>
    15.         body {
    16.             font: 16px/24px "宋体" #5a5a5a;
    17.         }
    18.  
    19.         a {
    20.             /* text-decoration: none; */
    21.             color: white;
    22.         }
    23.  
    24.         .title,
    25.         .bgbox {
    26.             width: 100%;
    27.             min-height: 100px;
    28.             color: white;
    29.             display: flex;
    30.             justify-content: center;
    31.             align-items: center;
    32.         }
    33.  
    34.         .bgbox {
    35.             background-repeat: no-repeat;
    36.             padding: 12px 0;
    37.             /* 图片的位置，居中，靠左对齐 */
    38.             background-position: center 0;
    39.  
    40.         }
    41.  
    42.         .sctBox {
    43.             width: 100%;
    44.             height: 100%;
    45.             display: flex;
    46.             flex-flow: row wrap;
    47.             text-align: center;
    48.             align-items: center;
    49.         }
    50.  
    51.         .sctBox .colorBox {
    52.             flex: 1 0 auto;
    53.             min-width: 90px;
    54.             height: 36px;
    55.             cursor: pointer;
    56.             margin: 20px 30px;
    57.         }
    58.  
    59.         /* 检测background机制 */
    60.         .box {
    61.             /* 无效属性值 */
    62.             background-color: "hhh";
    63.             line-height: 24px;
    64.             height: 100%;
    65.         }
    66.  
    67.         .btn {
    68.             background-color: transparent;
    69.             border-color: transparent;
    70.             color: #e6e6e6;
    71.         }
    72.  
    73.         .btn:hover,
    74.         .btn:focus {
    75.             background-color: transparent;
    76.             border-color: transparent;
    77.             color: #fa6f57;
    78.             cursor: pointer;
    79.         }
    80.     style>
    81. head>
    82.  
    83. <body>
    84.     <div id="app">
    85.         <div class="title" :style="colorValue === '' ? 'background:'+colorList[1] : 'background:'+colorValue">
    86.             <h1>心仪颜色表h1>
    87.         div>
    88.         <section class="sctBox">
    89.             <div class="colorBox color-read" :style="'background:'+item"
    90.                 v-for="(item,i) in colorList.filter((item) => item)" :key="item+i" @click="copy(item)"
    91.                 :data-clipboard-text="item" :title="'当前颜色值：'+item">div>
    92.         section>
    93.         <el-form :inline="true" style="text-align:center;">
    94.             <el-form-item prop="color" label="颜色值">
    95.                 <el-input v-model="colorValue" type="text" placeholder="请输入你喜欢的颜色" style="width:240px">el-input>
    96.             el-form-item>
    97.             <el-form-item prop="trans" label="透明度">
    98.                 <el-input v-model="transValue" type="number" placeholder="请输入0-1,支持小数点后两位" style="width:240px"
    99.                     :precision="2" :step="0.1" :min="0" :max="1">el-input>
    100.             el-form-item>
    101.             <el-form-item prop="color" label="图片">
    102.                 <el-input v-model="imgValue" type="text" placeholder="请输入图片地址,支持网页图片" style="width:240px">el-input>
    103.             el-form-item>
    104.             <el-form-item prop="color" label="图片高度">
    105.                 <el-input v-model="imgHeight" type="number" placeholder="请输入200-400px" style="width:240px" :step="100"
    106.                     :min="100" :max="400">el-input>
    107.             el-form-item>
    108.         el-form>
    109.         <div class="bgbox" :style="{backgroundSize: sizeValue, backgroundColor: colorValue === '' ? colorList[1] : colorValue,
    110.             opacity: transValue === '' ? '1' : transValue, backgroundImage: imgValue=== '' ? 'url()' : 'url('+imgValue+')',
    111.             minHeight: imgHeight === '' ? '200px' : imgHeight+'px'}">
    112.             <span class="box" :style="{}" v-html="spanContent" @click="addComment($event)">span>
    113.         div>
    114.     div>
    115.  
    116.     <script>
    117.         new Vue({
    118.             el: '#app',
    119.             data() {
    120.                 return {
    121.                     colorValue: '',
    122.                     transValue: '',
    123.                     imgValue: '',
    124.                     sizeValue: 'cover',
    125.                     btnColor: 'white',
    126.                     imgHeight: '',
    127.                     isReplace: true,
    128.                     colorList: [
    129.                         '#252525', '#008080', '#e79111', '#606060', '#5a5a5a', '',
    130.                         'teal', '#1091d2', '#333333', '#dcdcdc', '#dedede',
    131.                         '#cfe9f6', '#767676', '#67C23A', '#f2f2f2', '#fa6f57',
    132.                         '#7C7C7C', '#919191', '#1f1f1f', '#b2b2b2', '#a4a4a4',
    133.                         '#009944', '#666666', '#81a849', '#999999', '#cccccc',
    134.                         '#e6e6e6', '#a2bf78', '#f0f0f0', '#dddddd', '#f5f7fa',
    135.                         '#f6faff', '#d9d9d9', '#97a8be', '#329c6b', 'red',
    136.                         'orange', 'skyblue', 'pink', 'purple', 'green',
    137.                     ],
    138.                     spanContent: '发现一个问题：当我输入非颜色值时，主题的背景颜色不会发生变化；按理来说读取正确应该报错background里面的内容无法识别才对呀！
      测试发现：css会自动检测属性值是否无效，无效则默认没有该样式为什么还能保持原来的颜色？css接收有效属性会自动更新，接收无效属性没有触发更新，所以原有样式没有重新被渲染
      有效图片链接：https://img.dpm.org.cn/Uploads/Picture/2022/08/31/s630ec2c831366.jpg  暂时找不到合适尺寸的图片哈推荐网址
      无效图片链接：https://gd-hbimg.huaban.com/6b14c9ef6c766b5b7aa168cc6273de2ad7417782287e48-ZeSi4l
      为什么部分网页图片链接css中的background: url(网页图像链接)会无法识别？部分图片网站启用了图片防盗链
      如何判定背景图片和背景颜色同时存在？理论上背景图片整体小于背景颜色时可以查看效果  不信 点击这里 缩小图片尺寸吧！'
    139.                 }
    140.             },
    141.             methods: {
    142.                 copy(title) {
    143.                     let clipboard = new ClipboardJS('.color-read')
    144.                     clipboard.on('success', e => {
    145.                         console.log('复制成功，当前复制内容为: ' + title)
    146.                         this.$message.success("复制成功")
    147.                         // 释放内存
    148.                         clipboard.destroy()
    149.                     })
    150.                     clipboard.on('error', e => {
    151.                         // 不支持复制
    152.                         console.log('该浏览器不支持自动复制')
    153.                         // 释放内存
    154.                         clipboard.destroy()
    155.                     })
    156.                 },
    157.                 addComment: function (event) {
    158.                     if (event.target.nodeName === 'EL-BUTTON') {
    159.                         // 获取触发事件对象的属性
    160.                         this.changeImgSize();
    161.                     }
    162.                 },
    163.                 changeImgSize() {
    164.                     if (this.imgValue != '') {
    165.                         if (this.isReplace) {
    166.                             this.sizeValue = '50%'
    167.                             this.isReplace = false
    168.                         } else {
    169.                             this.sizeValue = 'cover'
    170.                             this.isReplace = true
    171.                         }
    172.                     } else {
    173.                         this.$message.warning("还没有添加图片背景呢？");
    174.                     }
    175.                 }
    176.             }
    177.         })
    178.     script>
    179. body>
    180.  
    181. html>

    效果：

     项目地址：利用学习的vue知识来做一个简单的颜色仪表盘 - Gitee.com

    项目总结

    总的来说没啥用，但就是玩

    功能实现

    1. 核心功能：点击颜色复制其颜色值，鼠标移入可查看具体颜色信息
    2. 该单面应用使用了v-model、v-bind、v-for、v-html等指令实现了在input中输入对应值切换对应效果
    3. 相关js在线引入，可直接运行

    使用教程

    方式1： 直接下载color.html里面的代码在浏览器中运行，需要有网条件

    方式2：下载color文件夹里面的文件本地直接运行，速度更快，支持无网条件

    在线引用：vue在线引入地址：https://v2.cn.vuejs.org/v2/guide/installation.html clipboard.min.js在线引入地址：https://www.itxst.com/package/clipboardjs/clipboard.min.js

    学习心得

    1. vue绑定style多个变量，使用三元运算符
    2. v-html中子元素点击事件失效如何解决
    3. el-input中的number属性如何处理有理数
    4. css中背景图片和背景颜色分开写的注意事项以及图片尺寸写入background的写法
    5. 使用filter()对数组进行空值处理
    6. flex属性：子元素占不满父元素宽度时，使用flex-grow:1,利用for循环对每个div进行均匀分配宽度
    7. v-model的运用和点击事件添加布尔标记及复制插件的使用

  • 相关阅读:
    verilog学习笔记（1）module实例化2
    antd+ Umi使用中出现的问题集合（一）
    数学建模--Subplot绘图的Python实现
    A. Morning Sandwich
    第二证券|抖音发布三季度安全透明度报告，整治贩卖焦虑广告近3万条
    七大排序算法---选择排序, 冒泡排序---持续更新中
    python 小案例87
    vue 使用MD5加密
    探秘Spring的设计精髓，深入解析架构原理
    拖放事件，dataTransfer，getBoundingClientRect
  • 原文地址：https://blog.csdn.net/qq_44760912/article/details/127043972