102 lines
2.8 KiB
Markdown
102 lines
2.8 KiB
Markdown
### 线上预览
|
||
|
||
|
||
[更多UNI-APP模板点击查看](https://www.masteryi.cn/uni-app)
|
||
|
||
### 使用方法
|
||
`<yi-code @onComplete="complete" @onChange="change"></yi-code>`
|
||
|
||
### 参数
|
||
|
||
| 属性 | 类型 | 说明 | 默认值 |
|
||
|---------------|----------------|-----------------------------------|--------|
|
||
| width | number | 宽度 rpx | 500 |
|
||
| maxlength | number | 验证码长度 | 6 |
|
||
| focus | boolean | 是否自动聚焦 | true |
|
||
| type | string | 组件风格支持block方框, dashed 虚线方框，line 线 | block |
|
||
| inputType | string | 输入框类型 支持text、number | number |
|
||
| hide | string | 隐藏字符，传值则会使用该字符隐藏对应的验证码数字，类似于传 * 模拟密码遮盖效果 | null |
|
||
| @onComplete | (code: string) | 输入长度===maxlength时的完成回调onComplete | null |
|
||
| @onChange | (code: string) | code值变更回调onChange | null |
|
||
| clear | ref function | 清除输入内容 | |
|
||
|
||
### 示例代码
|
||
```
|
||
<template>
|
||
<view class="page">
|
||
<view class="card">
|
||
<view class="title">block</view>
|
||
<view><button @click="onClear" style="background: #ff5500; color: #fff;">清除内容</button></view>
|
||
<view class="body">
|
||
<yi-code ref="code" :width="600" @onComplete="complete" @onChange="change"></yi-code>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="title">dashed</view>
|
||
<view class="body">
|
||
<yi-code :focus="false" :maxlength="5" type="dashed"></yi-code>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="title">line</view>
|
||
<view class="body">
|
||
<yi-code :focus="false" :maxlength="4" type="line"></yi-code>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 注意测试案例的时候 focus只保持一个自动聚焦， 其他设置false，防止调试输入不了；
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
onClear(){
|
||
this.$refs.code.clear()
|
||
},
|
||
complete(code){
|
||
console.log(`complete:${code}`);
|
||
},
|
||
change(code){
|
||
console.log(`change:${code}`);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.card{
|
||
width: 720rpx;
|
||
margin: 30rpx auto;
|
||
border: 1px solid #f0f0f0;
|
||
border-radius: 12rpx;
|
||
|
||
.title{
|
||
font-size: 14px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.body{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 150rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
``` |