getAnalogousColors

该函数生成一组类似色，使用 tinycolor 库来计算并随机调整颜色的透明度。

getAnalogousColors(params: Partial<GetAnalogousColorsOptions>): string[]

参数

参数名	描述	类型	默认值
results	返回的类似色数量	number	6
slices	用于划分颜色轮的分片数	number	30
colorSchemes	颜色方案数组	string[]	['#67C23A', '#E6A23C', '#409EFF', '#F56C6C', '#909399']
format	输出格式	enum	'hex8'

示例

<script lang="ts" setup>
import { getAnalogousColors, type GetAnalogousColorsOptions } from '@movk-repo/shared/utils'

const colors = ref<string[]>([])
const options = {
  results: 12,
  format: 'hex6',
} as GetAnalogousColorsOptions

// 刷新
function refresh() {
  colors.value = getAnalogousColors(options)
}

onMounted(() => {
  refresh()
})
</script>

<template>
  <ElButton type="primary" @click="refresh()">
    点击刷新
  </ElButton>
  <div flex="~ wrap" mt-1rem>
    <div
      v-for="color in colors" :key="color" :style="{
        width: '16.6667%',
        backgroundColor: color,
      }"
    >
      <code>{{ color }}</code>
    </div>
  </div>
</template>

隐藏源代码