更新记录

1.0.3（2025-04-10） 下载此版本

1.兼容小程序

1.0.2（2025-04-10） 下载此版本

修复小程序IOS上光标显示问题

1.0.1（2025-03-05） 下载此版本

新增圆点替换输入内容 边框样式 支持移动端可粘贴

平台兼容性

uni-app

其他

基本使用

<yh-code-input mode="line" v-model="code" @change="onChange" @finish="onFinish"></yh-code-input>

<script>
    import yhCodeInput from './components/yh-code-input/yh-code-input.vue';
    export default {
      components:{yhSelect},
      data(){
          return {
             code:"",
          }
      },
      methods: {
          onChange(v){
             console.log(v);
          },
          onFinish(v){
            console.log(v);
          }
      }
    }
</script>   

参数说明

dot:{//是否输入框内容用圆点替换 
    type: Boolean,
    default: false
},
adjustPosition: {// 键盘弹起时，是否自动上推页面
    type: Boolean,
    default: true
},
disabledKeyboard: {//是否隐藏原生键盘
    type: Boolean,
    default: false
},
inputType:{//输入框类型
    type:String,
    default:"number"
},
maxlength:{//最大长度
    type:Number,
    default:6
},
color:{
    type:String,
    default:"#000"
},
itemW:{//输入框宽
    type:String,
    default:'60rpx'
},
itemH:{//输入框高
    type:String,
    default:'60rpx'
},
itemBg:{//输入框背景色 
    type:String,
    default:'#f5f5f5'
},
itemRound:{//输入框圆角
    type:String,
    default:'4rpx'
},
itemFontSize:{//输入内容文字大小
    type:String,
    default:'28rpx'
},
cursorW:{//聚焦线宽
    type:String,
    default:'2rpx'
},
cursorH:{//聚焦线高
    type:String,
    default:'40rpx'
},
cursorBg:{//聚焦线背景
    type:String,
    default:'#000'
},
lineW:{//底线宽
    type:String,
    default:'100%'
},
lineH:{//底线高
    type:String,
    default:'6rpx'
},
lineBg:{//底线背景
    type:String,
    default:'#000'
},
lineRound:{//底线圆角
    type:String,
    default:'0rpx'
},
gutter:{//输入框间隙
    type:String,
    default:'10rpx'
},
mode:{//输入框模式 box 为背景色样式 line 为下划线样式 border 边框样式
    type:String,
    default:'box' 
}

@event {Function}   change  输入内容发生改变时触发
@event {Function}   finish  输入字符个数达maxlength值时触发