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>
|
|||
|
|
```
|