Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
baf95643
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
baf95643
编写于
1月 27, 2021
作者:
D
Drjingfubo
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: shortpassword新增doc
上级
8271f13a
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
227 addition
and
33 deletion
+227
-33
src/packages/ShortPassword/demo.vue
src/packages/ShortPassword/demo.vue
+37
-7
src/packages/ShortPassword/doc.md
src/packages/ShortPassword/doc.md
+162
-0
src/packages/ShortPassword/index.scss
src/packages/ShortPassword/index.scss
+1
-1
src/packages/ShortPassword/index.vue
src/packages/ShortPassword/index.vue
+27
-25
未找到文件。
src/packages/ShortPassword/demo.vue
浏览文件 @
baf95643
...
...
@@ -8,16 +8,38 @@
>
点击出现输出框
</nut-cell
>
<nut-cell>
您输入的密码是:
{{
state
.
value1
}}
</nut-cell>
<h2>
自定义长度
</h2>
<nut-cell
@
click=
"switchActionSheet('dialogShow2')"
>
点击出现输出框
</nut-cell
>
<nut-cell>
您输入的密码是:
{{
state
.
value2
}}
</nut-cell>
<h2>
出现提示信息
</h2>
<nut-cell
@
click=
"switchActionSheet('dialogShow3')"
>
点击出现输出框
</nut-cell
>
<nut-cell>
您输入的密码是:
{{
state
.
value3
}}
</nut-cell>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
:show-button=
"true"
>
</nut-shortpassword>
<nut-shortpassword
v-model:value=
"state.value1"
v-model:is-visible=
"state.dialogShow1"
:show-button=
"false"
:no-button=
"false"
@
sureClick=
"sureClick"
>
</nut-shortpassword>
<nut-shortpassword
v-model:value=
"state.value2"
v-model:is-visible=
"state.dialogShow2"
:length=
"5"
>
</nut-shortpassword>
<nut-shortpassword
v-model:value=
"state.value3"
v-model:is-visible=
"state.dialogShow3"
:errorMsg=
"state.errorMsg"
>
</nut-shortpassword>
</div>
...
...
@@ -32,25 +54,33 @@ export default createDemo({
const
state
=
reactive
({
dialogShow
:
false
,
dialogShow1
:
false
,
dialogShow2
:
false
,
dialogShow3
:
false
,
value
:
''
,
value1
:
''
value1
:
''
,
value2
:
''
,
value3
:
''
,
errorMsg
:
''
});
// 方法
function
switchActionSheet
(
param
)
{
state
[
`
${
param
}
`
]
=
!
state
[
`
${
param
}
`
];
}
function
sureClick
()
{
state
.
dialogShow1
=
false
;
}
watch
(
()
=>
state
.
value
,
()
=>
state
.
value
3
,
val
=>
{
if
(
val
.
length
==
6
)
{
state
.
dialogShow
=
false
;
console
.
log
(
state
.
dialogShow
);
state
.
errorMsg
=
'
请输入正确密码
'
;
}
}
);
return
{
state
,
switchActionSheet
switchActionSheet
,
sureClick
};
}
});
...
...
src/packages/ShortPassword/doc.md
浏览文件 @
baf95643
# ShortPassword 短密码组件
### 介绍
XXXXXX
### 安装
```
javascript
import
{
createApp
}
from
'
vue
'
;
import
{
ShortPassword
}
from
'
@nutui/nutui
'
;
const
app
=
createApp
();
app
.
use
(
ShortPassword
);
```
## 代码示例
### 基础用法
```
html
<div
@
click=
"switchActionSheet('dialogShow')"
>
点击出现输出框
</div>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
>
</nut-shortpassword>
```
```
javascript
setup
()
{
const
state
=
reactive
({
dialogShow
:
false
,
value
:
''
,
});
return
{
state
,
};
},
// ...
```
### 展示按钮
```
html
<div
@
click=
"switchActionSheet('dialogShow')"
>
点击出现输出框
</div>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
:no-button=
"false"
@
sureClick=
'sureClick'
>
</nut-shortpassword>
```
```
javascript
setup
()
{
const
state
=
reactive
({
dialogShow
:
false
,
value
:
''
,
});
function
switchActionSheet
()
{
state
.
dialogShow
=
!
state
.
dialogShow
}
function
sureClick
()
{
state
.
dialogShow
=
false
}
return
{
state
,
switchActionSheet
,
sureClick
};
},
```
### 自定义长度
```
html
<div
@
click=
"switchActionSheet('dialogShow')"
>
点击出现输出框
</div>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
:length=
5
>
</nut-shortpassword>
```
```
javascript
setup
()
{
const
state
=
reactive
({
dialogShow
:
false
,
value
:
''
,
});
function
switchActionSheet
()
{
state
.
dialogShow
=
!
state
.
dialogShow
}
return
{
state
,
switchActionSheet
};
},
```
### 出现提示信息
```
html
<div
@
click=
"switchActionSheet('dialogShow')"
>
点击出现输出框
</div>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
:errorMsg =
state.errorMsg
>
</nut-shortpassword>
```
```
javascript
setup
()
{
const
state
=
reactive
({
dialogShow
:
false
,
value
:
''
,
errorMsg
:
''
});
function
switchActionSheet
()
{
state
.
dialogShow
=
!
state
.
dialogShow
}
watch
(
()
=>
state
.
value3
,
val
=>
{
if
(
val
.
length
==
6
)
{
state
.
errorMsg
=
'
请输入正确密码
'
}
}
);
return
{
state
,
switchActionSheet
};
},
```
### Prop
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| isVisible | 是否展示短密码框| Booble | false
| value | 密码值 | string | ''
| noButton | 是否隐藏底部按钮 |Booble|true|
| length | 密码长度 |string||Number|6|
| errorMsg | 错误信息提示 |string|''|
### Event
| 事件名称 | 说明 | 回调参数
|----- | ----- | -----
| input | 输入密码时触发事件 | --
| sureClick | 点击确实时触发事件 | --
src/packages/ShortPassword/index.scss
浏览文件 @
baf95643
...
...
@@ -41,7 +41,7 @@
}
.nut-shortpsd-li
{
width
:
41px
;
width
:
16
.5%
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
...
...
src/packages/ShortPassword/index.vue
浏览文件 @
baf95643
...
...
@@ -6,7 +6,7 @@
@
ok-btn-click=
"sureClick"
@
cancel-btn-click=
"dialogShow = false"
@
close=
"close"
:noFooter=
"
show
Button"
:noFooter=
"
no
Button"
>
<view
class=
"nut-shortpsd-subtitle"
>
您使用了虚拟资产,请进行验证
</view>
<view
class=
"nut-input-w"
>
...
...
@@ -20,30 +20,30 @@
/>
<view
class=
"nut-shortpsd-fake"
@
click=
"focus"
>
<view
class=
"nut-shortpsd-li"
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 0"
></view
>
</view>
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 0"
></view
>
</view>
<view
class=
"nut-shortpsd-li"
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 1"
></view
>
</view>
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 1"
></view
>
</view>
<view
class=
"nut-shortpsd-li"
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 2"
></view
>
</view>
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 2"
></view
>
</view>
<view
class=
"nut-shortpsd-li"
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 3"
></view
>
</view>
<view
class=
"nut-shortpsd-li"
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 4"
></view
>
</view>
<view
class=
"nut-shortpsd-li"
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 5"
></view
>
</view>
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 3"
></view
>
</view>
<view
v-if=
"length >= 5"
class=
"nut-shortpsd-li"
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 4"
></view
>
</view>
<view
v-if=
"length == 6"
class=
"nut-shortpsd-li"
><view
class=
"nut-shortpsd-icon"
v-if=
"realInput.length > 5"
></view
>
</view>
</view>
</view>
<view
class=
"nut-shortpsd-message"
>
<view
class=
"nut-shortpsd-error"
>
{{
errorMsg
}}
</view>
<view
class=
"nut-shortpsd-forget"
>
<nut-icon
class=
"icon"
size=
"11px"
name=
"tips"
></nut-icon
>
忘记密码
</view
<nut-icon
class=
"icon"
size=
"11px"
name=
"tips"
></nut-icon
>
忘记密码
</view
>
</view>
</nut-dialog>
...
...
@@ -68,9 +68,13 @@ export default create({
type
:
String
,
default
:
''
},
show
Button
:
{
no
Button
:
{
type
:
Boolean
,
default
:
false
default
:
true
},
length
:
{
type
:
String
||
Number
,
default
:
6
}
},
setup
(
props
,
{
emit
})
{
...
...
@@ -79,7 +83,6 @@ export default create({
const
realpwd
=
ref
();
// 方法
function
sureClick
()
{
dialogShow
.
value
=
false
;
emit
(
'
sureClick
'
);
}
function
focus
()
{
...
...
@@ -88,11 +91,11 @@ export default create({
function
changeValue
(
e
:
Event
)
{
const
input
=
e
.
target
as
HTMLInputElement
;
let
val
=
input
.
value
;
if
(
val
.
length
>
6
)
{
val
=
val
.
slice
(
0
,
Number
(
6
));
if
(
val
.
length
>
Number
(
props
.
length
)
)
{
val
=
val
.
slice
(
0
,
Number
(
props
.
length
));
}
if
(
realInput
.
value
.
length
>
6
)
{
realInput
.
value
=
realInput
.
value
.
slice
(
0
,
Number
(
6
));
if
(
realInput
.
value
.
length
>
Number
(
props
.
length
)
)
{
realInput
.
value
=
realInput
.
value
.
slice
(
0
,
Number
(
props
.
length
));
}
emit
(
'
input
'
,
val
);
emit
(
'
update:value
'
,
val
);
...
...
@@ -103,7 +106,6 @@ export default create({
watch
(
()
=>
props
.
isVisible
,
val
=>
{
console
.
log
(
val
);
if
(
val
)
{
dialogShow
.
value
=
true
;
}
else
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录