uview-plus

# colorSwitch 颜色转换

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# RGB转十六进制Hex

# rgbToHex(rgb)

该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值

  • rgb <String> RGB颜色值，如rgb(230, 231, 233)
import { rgbToHex } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const rgb = ref('rgb(13, 145, 20)');

onLoad(() => {
  console.log(rgbToHex(rgb.value));
});

import { rgbToHex } from '@/uni_modules/uview-plus';
export default{
  data() {
    return {
      rgb: 'rgb(13, 145, 20)'
    }
  },
  onLoad() {
    console.log(rgbToHex(this.rgb));
  }
}

# 十六进制Hex转RGB

# hexToRgb(hex)

该函数可以将一个Hex的十六进制颜色值转换成一个RGB颜色值

  • hex <String> HEx颜色值，如#0afdce
import { hexToRgb } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const hex = ref('#0afdce');

onLoad(() => {
  console.log(hexToRgb(hex.value));
});

import { hexToRgb } from '@/uni_modules/uview-plus';
export default{
  data() {
    return {
      hex: '#0afdce'
    }
  },
  onLoad() {
    console.log(hexToRgb(this.hex));
  }
}

# 颜色渐变

# colorGradient(startColor, endColor, step)

该函数实现两个颜色值之间等分取值，返回一个数组，元素为十六进制形式的颜色值，数组长度为step值。 例如：colorGradient('rgb(250, 250, 250)', 'rgb(252, 252, 252)', 3)，得到的结果为["#fafafa", "#fafafa", "#fbfbfb"]

  • startColor <String> 开始颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)
  • endColor <String> 结束颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)
  • step <Number> 均分值，把开始值和结束值平均分成多少份
import { colorGradient } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  console.log(colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3));
  // 结果为：["#fafafa", "#fafafa", "#fbfbfb"]
});

import { colorGradient } from '@/uni_modules/uview-plus';
export default{
  onLoad() {
    console.log(colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3));
    // 结果为：["#fafafa", "#fafafa", "#fbfbfb"]
  }
}

# 颜色透明度

# colorToRgba(color, opacity = 0.3)

该函数可以接受一个十六进制或者rgb格式的颜色值(不能接受命名式颜色格式，比如white)，返回此颜色的rgba格式值，如下：

  • color <String> 颜色值，只能hex或者rgba格式
  • opacity <Number> 不透明度值，取值为0-1之间
import { colorToRgba } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  console.log(colorToRgba('#000000', 0.35));
  // 结果为 rgba(0, 0, 0, 0.35)
  
  console.log(colorToRgba('rgb(255, 180, 0)', 0.4));
  // 结果为 rgba(255, 180, 0, 0.4)
});

import { colorToRgba } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  console.log(colorToRgba('#000000', 0.35));
  // 结果为 rgba(0, 0, 0, 0.35)
  
  console.log(colorToRgba('rgb(255, 180, 0)', 0.4));
  // 结果为 rgba(255, 180, 0, 0.4)
});

← 颜色值 →