开发指南
组件
- 起步
- 基础组件
- 表单组件
- 数据组件
- 反馈组件
- 布局组件
- 导航组件
- 其他组件
JS
- 开发指南
- 网络
- 工具库
模板
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
colorSwitch 颜色转换
RGB转十六进制Hex
rgbToHex(rgb)
该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值
rgb
<String> RGB颜色值,如rgb(230, 231, 233)
export default{
data() {
return {
rgb: 'rgb(13, 145, 20)'
}
},
onLoad() {
console.log(this.$u.rgbToHex(this.rgb));
}
}
十六进制Hex转RGB
hexToRgb(hex)
该函数可以将一个Hex的十六进制颜色值转换成一个RGB颜色值
hex
<String> HEx颜色值,如#0afdce
export default{
data() {
return {
hex: '#0afdce'
}
},
onLoad() {
console.log(this.$u.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> 均分值,把开始值和结束值平均分成多少份
export default{
onLoad() {
console.log(this.$u.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之间
this.$u.colorToRgba('#000000', 0.35);
// 结果为 rgba(0, 0, 0, 0.35)
this.$u.colorToRgba('rgb(255, 180, 0)', 0.4);
// 结果为 rgba(255, 180, 0, 0.4)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论