Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
璃白.
Finger Dance
提交
7a820ff4
Finger Dance
项目概览
璃白.
/
Finger Dance
8 个月 前同步成功
通知
2
Star
3
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Finger Dance
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
7a820ff4
编写于
1月 27, 2021
作者:
郭
郭维嘉
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:添加输入校验
上级
d8dd4d4e
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
65 addition
and
4 deletion
+65
-4
src/components/index/text.vue
src/components/index/text.vue
+65
-4
未找到文件。
src/components/index/text.vue
浏览文件 @
7a820ff4
<
template
>
<div>
{{
text
}}
<div
class=
"text"
>
<span
v-for=
"(item, index) in text"
:key=
"index"
:class=
"
{ active: index === currentIndex }"
>
{{
item
|
formatLetter
}}
</span
>
</div>
</
template
>
...
...
@@ -9,10 +14,25 @@ import CreateText from "@/assets/js/createText";
export
default
{
data
()
{
return
{
length
:
20
,
length
:
2
,
currentIndex
:
0
,
text
:
""
,
};
},
computed
:
{
currentLetter
()
{
return
this
.
$store
.
state
.
currentLetter
;
},
},
watch
:
{
currentLetter
(
val
)
{
if
(
val
===
null
)
return
;
const
currentLetter
=
this
.
text
[
this
.
currentIndex
];
if
(
val
.
toLowerCase
()
===
currentLetter
.
toLowerCase
())
{
this
.
next
();
}
},
},
created
()
{
this
.
createTextList
();
},
...
...
@@ -22,8 +42,49 @@ export default {
const
res
=
arr
.
map
(()
=>
CreateText
.
create
());
this
.
text
=
res
.
join
(
"
"
).
toLowerCase
();
},
next
()
{
this
.
currentIndex
++
;
if
(
this
.
currentIndex
===
this
.
text
.
length
)
{
this
.
currentIndex
=
0
;
this
.
createTextList
();
}
},
},
filters
:
{
formatLetter
(
val
)
{
if
(
!
val
)
return
""
;
return
val
===
"
"
?
"
␣
"
:
val
;
},
},
};
</
script
>
<
style
lang=
"less"
scoped
></
style
>
<
style
lang=
"less"
scoped
>
@keyframes cursor {
0% {
background: none;
color: #000;
}
50% {
background: #000;
color: #fff;
}
100% {
background: none;
color: #000;
}
}
.text {
span {
font-family: Ubuntu Mono, Lucida Console, monospace;
display: inline-block;
text-align: center;
font-size: 20px;
min-width: 0.5em;
&.active {
animation: cursor 0.6s ease infinite;
}
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录