uniapp 基于 vue3 开发的【验证码输入框】

### 1. 组件 RuiInputCode 的环境 1. 使用的是 vue3 进行开发； 2. 使用的是 uniapp 开发的组件。 ### 2. RuiInputCode 组件引入 ``` import RuiInputCode from '../../components/RuiInputCode.vue' ``` ### 3. RuiInputCode 组件使用实例 ``` <RuiInputCode ref="input_code" :maxLength="4" styleCode="border:1px solid red;" styleCodeActive="border:1px solid green;" styleFlicker="background: blue;" @finish="getCodeValue" v-model="value"/> ``` ### 4. 参数说明 |参数名|描述|默认值| |------|----|-----| |styleInput|实际输入值的input的样式，默认样式是 fixed 定位到当前界面外。|| |styleCode|界面展示框未输入值时的样式|| |styleCodeActive|界面展示框输入值后的样式|| |styleFlicker|输入框中光标的样式|| |maxLength|输入验证码的长度设置|6| |focus|是否自动聚焦|false| |type|输入框可以输入的类型|number| ### 5. 事件说明 |事件名|描述| |-----|----| |change|输入值变动的时候触发| |update:modelValue|v-model绑定值的更新| |finish|输入值的长度达到 maxLength 时触发|