vue.js3: html的十六进制和rgb颜色互相转换(vue@3.2.37)

一，js代码:

<template>
  <div>
    <div style="width:450px;margin: auto;text-align: center;font-size: 20px;color:#777777;padding-top: 10px;padding-bottom: 10px;">
      RGB转十六进制
    </div>
    <div style="width:450px;margin: auto;display: flex;flex-direction: row;background: rgb(248, 248, 248);">
      <div style="width:200px;">

        <div style="display: flex;flex-direction: row;margin-top: 10px;">
          <div style="color:#ff0000;width:100px;line-height: 30px;height:30px;text-align: right;">Red:</div>
      <el-input v-model="red" placeholder="红色" @input="colorRGBtoHex" type="number" style="width:100px;">
        <template #suffix><i class="el-icon-user el-input__icon"></i></template>
      </el-input>
        </div>

        <div style="display: flex;flex-direction: row;margin-top: 10px;">
          <div style="color:#00ff00;width:100px;line-height: 30px;height:30px;text-align: right;">Green:</div>
      <el-input v-model="green" placeholder="绿色" @input="colorRGBtoHex" type="number" style="width:100px;">
        <template #suffix><i class="el-icon-user el-input__icon"></i></template>
      </el-input>
        </div>

        <div style="display: flex;flex-direction: row;margin-top: 10px;margin-bottom: 10px;">
          <div style="color:#0000ff;width:100px;line-height: 30px;height:30px;text-align: right;">Blue:</div>
      <el-input v-model="blue" placeholder="蓝色" @input="colorRGBtoHex" type="number" style="width:100px;">
        <template #suffix><i class="el-icon-user el-input__icon"></i></template>
      </el-input>
        </div>


      </div>
      <div style="width:200px;margin-left:50px;">
        <div style="width:90px;text-align:left;margin-top:10px;">{{hexColor}}</div>
        <div :style="{width:'80px',marginTop:'10px',height:'80px',borderRadius:'10px',background:hexColor}"></div>
      </div>
    </div>

    <div style="width:450px;margin: auto;text-align: center;font-size: 20px;color:#777777;padding-top: 10px;padding-bottom: 10px;">
      十六进制转RGB
    </div>
    <div style="width:450px;margin: auto;display: flex;flex-direction: row;height:136px;background: rgb(248, 248, 248);">
      <div style="display: flex;flex-direction: row;margin-top: 10px;">
        <div style="color:#000000;width:100px;line-height: 30px;height:30px;text-align: right;">Hex:</div>
      <el-input v-model="hex" placeholder="十六进制颜色" @input="colorHextoRGB"
                maxlength="7" minlength="4" style="width:100px;height:32px;">
        <template #suffix><i class="el-icon-user el-input__icon"></i></template>
      </el-input>
      </div>
      <div style="width:200px;margin-left:50px;">
        <div style="width:90px;text-align:left;margin-top:10px;">{{rgbColor}}</div>
        <div :style="{width:'80px',marginTop:'10px',height:'80px',borderRadius:'10px',background:rgbColor}"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {ref} from "vue"
export default {
  name: "ColorComp",
  setup() {
    //从单一颜色值得到十六进制
    const getHex = (color) => {
      let hex = Number(color).toString(16)
      hex = hex.length == 1 ? '0' + hex : hex;
      return hex
    }

    //rgb颜色转十六进制
    const colorRGBtoHex = () => {
      if (red.value > 255) {
         red.value = 255;
      }
      if (red.value < 0) {
        red.value = 0;
      }
      if (green.value > 255) {
        green.value = 255;
      }
      if (green.value < 0) {
        green.value = 0;
      }
      if (blue.value > 255) {
        blue.value = 255;
      }
      if (blue.value < 0) {
        blue.value = 0;
      }
      let r = red.value;
      let g = green.value;
      let b = blue.value;

      var hex = '#' + getHex(r) + getHex(g) + getHex(b);
      hexColor.value = hex.toUpperCase();
    }
    //输入的红色
    const red = ref(0);
    //输入的绿色
    const green = ref(0);
    //输入的蓝色
    const blue = ref(0);
    //从rgb转换得到的十六进制颜色
    const hexColor = ref('#000000');
    //从十六进制转换得到的rgb颜色
    const rgbColor = ref('rgb(0,0,0)');
    //输入的十六进制
    const hex = ref('#000000');

    const isInHex = (c) => {
       let hexArr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
       for (let i = 0; i < hexArr.length; i += 1) {
        if (hexArr[i] === c) {
          return true;
        }
      }
       return false;
    }

    //十六进制颜色转rgb
    const colorHextoRGB = () => {
      let color = hex.value.toLowerCase();
      //判断第一个字符是否是#
      if (color[0] !== '#') {
         color = '#'+color;
         hex.value = color.toUpperCase();
      }
      //判断剩余的字符是否是十六进制
      for (let i = 1; i < color.length; i += 1) {
        let curChar = color[i];
        //console.log(curChar);
        if (isInHex(curChar) == false) {
          color = color.replace(curChar,'');
          hex.value = color.toUpperCase();
        }
      }

      // 如果只有三位的值，需变成六位，如：#fff => #ffffff
      if (color.length === 4) {
        var colorNew = "#";
        for (let i = 1; i < 4; i += 1) {
          colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
        }
        color = colorNew;
      }
      // 处理六位的颜色值，转为RGB
      var colorChange = [];
      for (let i = 1; i < 7; i += 2) {
        colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
      }
      let rgb =  "RGB(" + colorChange.join(",") + ")";
      rgbColor.value = rgb;
      hex.value = color.toUpperCase();
    }

    return {
      colorRGBtoHex,
      red,
      green,
      blue,
      hexColor,
      rgbColor,
      hex,
      colorHextoRGB,
    }
  }
}
</script>

<style scoped>
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/02/vue-js3-html-de-shi-liu-jin-zhi-he-rgb-yan-se-hu-xiang/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，查看效果

三，查看vue框架的版本:

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped