Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
5c962a16
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,发现更多精彩内容 >>
提交
5c962a16
编写于
3月 15, 2021
作者:
richard_1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: review shortpassword
上级
c069309c
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
152 addition
and
204 deletion
+152
-204
src/packages/shortpassword/demo.vue
src/packages/shortpassword/demo.vue
+61
-65
src/packages/shortpassword/doc.md
src/packages/shortpassword/doc.md
+65
-114
src/packages/shortpassword/index.vue
src/packages/shortpassword/index.vue
+26
-25
未找到文件。
src/packages/shortpassword/demo.vue
浏览文件 @
5c962a16
<
template
>
<div
class=
"demo full"
>
<h2>
基础用法
</h2>
<nut-cell
@
click=
"switchActionSheet('dialogShow')"
>
点击出现输出框
</nut-cell>
<nut-cell>
您输入的密码是:
{{
state
.
value
}}
</nut-cell>
<h2>
展示按钮
</h2>
<nut-cell
@
click=
"switchActionSheet('dialogShow1')"
>
点击出现输出框
</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>
<div
class=
"demo"
>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
>
</nut-shortpassword>
<nut-shortpassword
v-model:value=
"state.value1"
v-model:is-visible=
"state.dialogShow1"
:no-button=
"false"
@
sure-click=
"sureClick"
>
</nut-shortpassword>
<nut-shortpassword
v-model:value=
"state.value2"
v-model:is-visible=
"state.dialogShow2"
:length=
"4"
>
</nut-shortpassword>
<nut-shortpassword
v-model:value=
"state.value3"
v-model:is-visible=
"state.dialogShow3"
v-model:visible=
"state.visible"
:no-button=
"state.noButton"
:length=
"state.length"
:error-msg=
"state.errorMsg"
@
complete=
"complete"
link=
"http://m.jd.com"
@
on-change=
"methods.onChange"
@
on-complete=
"methods.onComplete"
@
on-ok=
"methods.onOk"
@
on-tips=
"methods.onTips"
>
</nut-shortpassword>
<nut-cell
title=
"基础用法"
is-link
@
click=
"state.visible = true"
></nut-cell>
<nut-cell
title=
"显示按钮组"
is-link
@
click=
"
state.visible = true;
state.noButton = false;
"
></nut-cell>
<nut-cell
title=
"自定义密码长度4"
is-link
@
click=
"
state.visible = true;
state.noButton = false;
state.length = 4;
"
></nut-cell>
<nut-cell
title=
"忘记密码提示语事件回调"
is-link
@
click=
"state.visible = true"
></nut-cell>
<nut-cell
title=
"错误提示语"
is-link
@
click=
"
state.visible = true;
state.errorMsg = '请输入正确密码';
"
></nut-cell>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
re
f
,
reactive
,
watch
}
from
'
vue
'
;
import
{
re
active
,
getCurrentInstance
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
createDemo
}
=
createComponent
(
'
shortpassword
'
);
export
default
createDemo
({
setup
()
{
let
{
ctx
}
=
getCurrentInstance
();
const
state
=
reactive
({
dialogShow
:
false
,
dialogShow1
:
false
,
dialogShow2
:
false
,
dialogShow3
:
false
,
visible
:
false
,
noButton
:
true
,
value
:
''
,
value1
:
''
,
value2
:
''
,
value3
:
''
,
errorMsg
:
''
errorMsg
:
''
,
length
:
6
});
// 方法
function
switchActionSheet
(
param
:
'
dialogShow
'
|
'
dialogShow1
'
|
'
dialogShow2
'
|
'
dialogShow3
'
)
{
state
[
param
]
=
!
state
[
param
];
}
function
sureClick
(
val
:
string
)
{
console
.
log
(
val
);
state
.
dialogShow1
=
false
;
}
function
complete
()
{
state
.
errorMsg
=
'
请输入正确密码
'
;
}
const
methods
=
{
onChange
(
val
:
string
)
{
val
&&
ctx
.
$toast
.
text
(
val
);
},
onOk
(
val
:
string
)
{
val
&&
ctx
.
$toast
.
text
(
val
);
state
.
visible
=
false
;
},
onComplete
()
{},
onTips
()
{
ctx
.
$toast
.
text
(
'
执行忘记密码逻辑
'
);
}
};
return
{
state
,
switchActionSheet
,
sureClick
,
complete
methods
};
}
});
...
...
src/packages/shortpassword/doc.md
浏览文件 @
5c962a16
...
...
@@ -16,151 +16,102 @@ app.use(ShortPassword);
## 代码示例
###
基础用法
###
公用片段
```
html
<div
@
click=
"switchActionSheet('dialogShow')"
>
点击出现输出框
</div>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
>
<nut-shortpassword
v-model:value=
"state.value"
v-model:visible=
"state.visible"
:no-button=
"state.noButton"
:length=
"state.length"
:error-msg=
"state.errorMsg"
@
on-change=
"methods.onChange"
@
on-complete=
"methods.onComplete"
@
on-ok=
"methods.onOk"
@
on-tips=
"methods.onTips"
>
</nut-shortpassword>
```
```
javascript
setup
()
{
const
state
=
reactive
({
dialogShow
:
false
,
value
:
''
,
});
return
{
state
,
};
},
// ...
```
### 展示按钮
import
{
reactive
,
getCurrentInstance
}
from
'
vue
'
;
setup
()
{
let
{
ctx
}
=
getCurrentInstance
();
const
state
=
reactive
({
visible
:
false
,
noButton
:
true
,
value
:
''
,
errorMsg
:
''
,
length
:
6
});
const
methods
=
{
onChange
(
val
:
string
)
{
val
&&
ctx
.
$toast
.
text
(
val
);
},
onOk
(
val
:
string
)
{
val
&&
ctx
.
$toast
.
text
(
val
);
state
.
visible
=
false
;
},
onComplete
()
{
},
onTips
()
{
ctx
.
$toast
.
text
(
'
执行忘记密码逻辑
'
);
}
};
return
{
state
,
methods
};
}
```
html
<div
@
click=
"switchActionSheet('dialogShow')"
>
点击出现输出框
</div>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
:no-button=
"false"
@
sure-click=
'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
<nut-cell
title=
"基础用法"
is-link
@
click=
"state.visible = true;"
></nut-cell>
```
###
自定义长度
###
显示按钮组
```
html
<div
@
click=
"switchActionSheet('dialogShow')"
>
点击出现输出框
</div>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
:length=
5
>
</nut-shortpassword>
<nut-cell
title=
"显示按钮组"
is-link
@
click=
"state.visible = true;state.noButton = false;"
></nut-cell>
```
```
javascript
setup
()
{
const
state
=
reactive
({
dialogShow
:
false
,
value
:
''
,
});
function
switchActionSheet
()
{
state
.
dialogShow
=
!
state
.
dialogShow
}
return
{
state
,
switchActionSheet
};
},
```
### 自定义密码长度4
### 出现提示信息
```
html
<nut-cell
title=
"自定义密码长度4"
is-link
@
click=
"state.visible = true;state.length = 4;"
></nut-cell>
```
### 忘记密码提示语事件回调
```
html
<div
@
click=
"switchActionSheet('dialogShow')"
>
点击出现输出框
</div>
<nut-shortpassword
v-model:value=
"state.value"
v-model:is-visible=
"state.dialogShow"
:error-msg =
state.errorMsg
>
</nut-shortpassword>
<nut-cell
title=
"忘记密码提示语事件回调"
is-link
@
click=
"state.visible = true;"
></nut-cell>
```
```
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
};
},
### 错误提示语
```
html
<nut-cell
title=
"错误提示语"
is-link
@
click=
"state.visible = true;state.errorMsg = '请输入正确密码';"
></nut-cell>
```
### Prop
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| title | 标题| Boolean | '请输入密码'
| is-visible | 是否展示短密码框| Boolean | false
| value | 密码值 | string | ''
|----- | ----- | ----- | ----- |
| title | 标题| String | 请输入密码|
| desc | 密码框描述| String | 您使用了虚拟资产,请进行验证|
| tips | 提示语| String | 忘记密码|
| visible | 是否展示短密码框| Boolean | false|
| value | 密码初始值 | String | ''|
| no-button | 是否隐藏底部按钮 |Boolean|true|
| length | 密码长度,取值为4,5,6 |string||Number|6|
| error-msg | 错误信息提示 |string|''|
| show-password-tips | 忘记密码提示信息 |string|'忘记密码'|
| link | 忘记密码跳转链接 |string|''|
| length | 密码长度,取值为4~6 |String||Number|6|
| error-msg | 错误信息提示 |String|''|
### Event
| 事件名称 | 说明 | 回调参数
|----- | ----- | -----
|
input
| 输入密码时触发事件 | --
|
sure-clic
k | 点击确实时触发事件 | value
|
change
| 输入密码时触发事件 | --
|
on-o
k | 点击确实时触发事件 | value
| complete | 输入完成的回调 | value
src/packages/shortpassword/index.vue
浏览文件 @
5c962a16
...
...
@@ -2,13 +2,13 @@
<view>
<nut-dialog
:title=
"title"
:visible=
"
isV
isible"
:visible=
"
v
isible"
@
ok-btn-click=
"sureClick"
@
cancel-btn-click=
"close"
@
close=
"close"
:no-footer=
"noButton"
>
<view
class=
"nut-shortpsd-subtitle"
>
您使用了虚拟资产,请进行验证
</view>
<view
class=
"nut-shortpsd-subtitle"
>
{{
desc
}}
</view>
<view
class=
"nut-input-w"
>
<input
ref=
"realpwd"
...
...
@@ -33,9 +33,9 @@
</view>
<view
class=
"nut-shortpsd-message"
>
<view
class=
"nut-shortpsd-error"
>
{{
errorMsg
}}
</view>
<view
class=
"nut-shortpsd-forget"
v-if=
"
showPasswordT
ips"
>
<view
class=
"nut-shortpsd-forget"
v-if=
"
t
ips"
>
<nut-icon
class=
"icon"
size=
"11px"
name=
"tips"
></nut-icon>
<view
@
click=
"
link"
>
忘记密码
</view>
<view
@
click=
"
onTips"
>
{{
tips
}}
</view>
</view>
</view>
</nut-dialog>
...
...
@@ -43,7 +43,7 @@
</
template
>
<
script
lang=
"ts"
>
import
{
ref
,
watch
,
computed
}
from
'
vue
'
;
import
{
ref
,
computed
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
create
}
=
createComponent
(
'
shortpassword
'
);
export
default
create
({
...
...
@@ -52,7 +52,15 @@ export default create({
type
:
String
,
default
:
'
请输入密码
'
},
isVisible
:
{
desc
:
{
type
:
String
,
default
:
'
您使用了虚拟资产,请进行验证
'
},
tips
:
{
type
:
String
,
default
:
'
忘记密码
'
},
visible
:
{
type
:
Boolean
,
default
:
false
},
...
...
@@ -71,22 +79,15 @@ export default create({
length
:
{
type
:
[
String
,
Number
],
//4~6
default
:
6
},
showPasswordTips
:
{
type
:
Boolean
,
default
:
true
},
link
:
{
type
:
String
,
default
:
''
}
},
emits
:
[
'
sure-click
'
,
'
update:value
'
,
'
update:is-visible
'
,
'
complete
'
,
'
input
'
'
update:visible
'
,
'
on-complete
'
,
'
on-change
'
,
'
on-ok
'
,
'
on-tips
'
],
setup
(
props
,
{
emit
})
{
const
realInput
=
ref
(
props
.
value
);
...
...
@@ -95,7 +96,7 @@ export default create({
// 方法
function
sureClick
()
{
emit
(
'
sure-clic
k
'
,
realInput
.
value
);
emit
(
'
on-o
k
'
,
realInput
.
value
);
}
function
focus
()
{
realpwd
.
value
.
focus
();
...
...
@@ -108,19 +109,19 @@ export default create({
realInput
.
value
=
val
;
}
if
(
realInput
.
value
.
length
===
comLen
.
value
)
{
emit
(
'
complete
'
,
val
);
emit
(
'
on-
complete
'
,
val
);
}
emit
(
'
input
'
,
val
);
emit
(
'
on-change
'
,
val
);
emit
(
'
update:value
'
,
val
);
}
function
close
()
{
emit
(
'
update:
is-
visible
'
,
false
);
emit
(
'
update:visible
'
,
false
);
}
function
range
(
val
:
number
)
{
return
Math
.
min
(
Math
.
max
(
4
,
val
),
6
);
}
function
link
()
{
if
(
props
.
link
)
window
.
location
.
href
=
props
.
link
;
function
onTips
()
{
emit
(
'
on-tips
'
)
;
}
return
{
comLen
,
...
...
@@ -131,7 +132,7 @@ export default create({
range
,
changeValue
,
close
,
link
onTips
};
}
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录