更新记录

1.0.0（2024-07-23） 下载此版本

颜色深浅计算函数 参数1 传入颜色
参数2 传入计算颜色的数值 数值越小颜色越深 数值越大颜色越浅

平台兼容性

tzm-color

<style scoped>
    .container {}

    .content {
        display: flex;
        padding: 10px;
        padding-bottom: 0;
    }

    .item {
        width: 40px;
        height: 40px;
    }
</style>

<template>
    <view class="container">
        <view class="content" v-for="data in color">
            <view class="item" :style="{'background-color': colorutils(data,30)}"></view>
            <view class="item" :style="{'background-color': data}"></view>
            <view class="item" :style="{'background-color': colorutils(data,80)}"></view>
            <view class="item" :style="{'background-color': colorutils(data,90)}"></view>
            <view class="item" :style="{'background-color': colorutils(data,95)}"></view>
        </view>
    </view>
</template>

<script>
    // 引入js 
    import colorutils from "./components/tzm-color/index.js"
    export default {
        data() {
            return {
                color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
            }
        },
        methods: {
            // 参数1 传入颜色  参数2 传入计算颜色的数值 数值越小颜色越深 数值越大颜色越浅
            colorutils
        }
    }
</script>