Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
登峰造极境;
随即唯一深色
提交
88bfa24e
随
随即唯一深色
项目概览
登峰造极境;
/
随即唯一深色
与 Fork 源项目一致
Fork自
inscode / VueJS
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
随
随即唯一深色
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
88bfa24e
编写于
5月 11, 2023
作者:
6
64477b63f791091b8f791b3b
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Auto commit
上级
bc9dd397
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
36 addition
and
19 deletion
+36
-19
src/App.vue
src/App.vue
+36
-19
未找到文件。
src/App.vue
浏览文件 @
88bfa24e
<
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录