Utils 工具库 - ColorTransform 颜色转换

颜色转换

#hexToRgb

<template>
    <div class="wrapper">
        <text>hexToRgb: hex格式转换为Rgb</text>
    </div>
</template>
<script>
export default {
    data:()=> ({
        name: 'hexToRgb',
    }),
    methods: {
        colorTransformHandler() {
            let color = '#267aff'
            //hex格式转换为Rgb格式
            let res = this.$util.hexToRgb(color)
            this.$toast(res)
        }
    }
}
</script>
<style scoped>
.wrapper{
    background-color: #ffffff;
}
</style>

#参数

• 传参描述：

Params	Type	Required	default	Value
sColor	String	Y	-	传入hex色值
isStr	Boolean	N	true	`true

#rgbToHex

<template>
    <div class="wrapper">
        <text>rgbToHex: rgb格式转换为Hex</text>
    </div>
</template>
<script>
export default {
    data:()=> ({
        name: 'hexToRgb',
    }),
    methods: {
        colorTransformHandler() {
            let color = 'rgb(255,0,0)'
            //rgb格式转换为hex格式
            let res = this.$util.rgbToHex(color)
            this.$toast(res)
        }
    }
}
</script>
<style scoped>
.wrapper{
    background-color: #ffffff;
}
</style>

#参数

• 传参描述：

Params	Type	Required	default	Value
rgb	String	Y	-	传入rgb色值

#颜色过渡

#colorGradient

<template>
    <div class="wrapper">
        <text>colorGradient: 颜色过渡</text>
    </div>
</template>
<script>
export default {
    data:()=> ({
        name: 'colorGradient',
    }),
    methods: {
        colorTransformHandler() {
            let startColor = 'rgb(255,0,0)'
            let endColor = 'rgb(0,0,255)'
            let step = 10
            //rgb格式转换为hex格式
            let res = this.$util.colorGradient(startColor,endColor,step)
            this.$toast(res)
        }
    }
}
</script>
<style scoped>
.wrapper{
    background-color: #ffffff;
}
</style>

#参数

• 传参描述：

Params	Type	Required	default	Value
startColor	String	N	rgb(255,0,0)	起始rgb色值
endColor	String	N	rgb(0,0,255)	起始rgb色值
step	String	Number	10	步长