Auto commit

上级 bc9dd397
<template>
<main>
<button @click="configColor">生成唯一随机深色</button>
<div class="colorChunk" v-for="item in data" :key="item" :style="`background-color: ${item.color}`">{{ item.color }}</div>
<button @click="reSetData">生成唯一随机深色</button>
<section class="box">
<div class="colorChunk" v-for="item in data" :key="item" :style="`background-color: ${item.color}`">{{ item.color }}
</div>
</section>
</main>
</template>
<script>
......@@ -10,15 +13,15 @@ export default {
name: "randomColor",
setup() {
const BasicState = reactive({
data:[
{name:'1'},
{name:'2'},
{name:'3'},
{name:'4'},
{name:'5'},
{name:'6'}
data: [
{ name: '1' },
{ name: '2' },
{ name: '3' },
{ name: '4' },
{ name: '5' },
{ name: '6' }
],
exist_color:[],
exist_color: [], // 记录生成
randomColor(exist_color) {
let r = Math.floor(Math.random() * 192);
let g = Math.floor(Math.random() * 192);
......@@ -27,24 +30,34 @@ export default {
let g16 = g.toString(16).length === 1 && g.toString(16) <= "f" ? 0 + g.toString(16) : g.toString(16);
let b16 = b.toString(16).length === 1 && b.toString(16) <= "f" ? 0 + b.toString(16) : b.toString(16);
let color = '#' + r16 + g16 + b16;
// 判定是否重复
if (exist_color.indexOf(color) === -1) {
return color;
} else {
// 重复?调用自身重新随机
BasicState.randomColor(exist_color);
}
},
configColor(){
configColor() {
BasicState.exist_color = [];
BasicState.data.forEach(ele=>{
let color = BasicState.randomColor(BasicState.exist_color);
ele = {
name:`第${ele.name}个`,
color:color
}
let arr = [];
return new Promise((resolve) => {
BasicState.data.forEach((ele) => {
let color = BasicState.randomColor(BasicState.exist_color);
arr.push({
name: `第${ele.name}个`,
color: color
})
})
resolve(arr)
})
},
async reSetData() {
const result = await BasicState.configColor();
BasicState.data = result;
}
})
BasicState.configColor();
BasicState.reSetData();
return {
...toRefs(BasicState)
}
......@@ -52,7 +65,11 @@ export default {
}
</script>
<style scoped>
.colorChunk{
.box{
display: flex;
flex-wrap: wrap;
}
.colorChunk {
height: 200px;
width: 200px;
border: 1px solid red;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册