颜色相关函数
genRandomColor
随机生成颜色
返回值 (arg: string ｜ number | undefined): string
参数
| 参数属性 | 说明 | 类型 |
|---|---|---|
arg | hsl hsla rgb rgba 16, 生成不同格式的颜色， 不传默认为rgb | string |
基础用法
查看代码
vue
<script setup lang="ts">
import { ref } from 'vue'
import {genRandomColor} from '@dense-labs/utils'
let color = ref()
let list = ref([])
list.value = ['hsl', 'hsla', 'rgb', 'rgba', '16']
const randomColor = (e) => {
color.value = genRandomColor(e)
}
</script>
<template>
<el-row class="mb-4">
<el-button type="primary" v-for="(item, index) in list" :key="index" @click="randomColor(item)">{{item}}</el-button>
</el-row>
<el-row class="text mb-4" :style="{'background': color}">{{color}}</el-row>
</template>
<style>
.text {
padding: 20px;
}
</style>