分享开发经验瓜分5000元大奖，聊聊#我写代码那些年#的故事

Flag: 坚持为社区贡献高颜值原生自定义组件！🎉🎉🎉

Motive: 在遇到问题的时候得到过很多朋友的耐心回答和讲解，所以也希望能为社区做点贡献！🌈🌈🌈

Introduce: 非常高兴和大家在这里相遇，喜欢写代码，非常欢迎社区的朋友与我交流！🚀🚀🚀

今日原生自定义组件《验证码输入框》

先来看效果，需要的小伙伴可以滚动至文章末尾获取组件。

基本使用

通过 mode 属性修改UI展现形式，可取以下值：

square-border(默认)：每个字符输入位置替换为一个带边框的正方形

under-line：每个字符输入位置替换为一个下划线

through-line：每个字符输入位置替换为一个横线

<verify-input mode="under-line" />

组件渲染后立即聚焦

可以通过 focus 属性设置组件渲染后就立即获得焦点，同样可以在特定时机修改该属性以使输入框获得焦点

<verify-input focus />

设置初始值和最大输入长度

通过 value 属性设置输入初始值；通过 maxlength 属性设置最大输入字符长度

<verify-input maxlength="8" value="123" />

使用 “●” 代替输入的值

通过将 type 属性设置为 password 即可隐藏输入内容；type属性其他可选值如下：

number：数字输入，非数字不能输入，非数字初始值(value属性)无效

text：文本输入，可输入任意字符

<verify-input type="password" />

属性列表

源码一览

<!-- ttml 组件结构 -->
<view class="gu-verify-input {{cursor}} {{mode}} {{maxlength>6?'mini':''}}"
    style="--inactive-color:{{inactiveColor}};--active-color:{{activeColor}}">
    <input class="inp" maxlength="{{maxlength}}" focus="{{inpFocus}}" bindinput="handleInpChange"
        bindblur="handleInpBlur" />
    <view class="inp-result">
        <view class="input-item {{inpFocus?'is-focus':''}} {{bold?'bold':''}}" tt:for="{{maxlength}}">
            <view class="inner {{index<valueArr.length?'light':''}} {{index==valueArr.length?'current':''}}"
                bindtap="handleInpFocus" style="color:{{textColor}}">
                <text class="{{type=='password'?'gu-hidden':''}}">{{valueArr[index]}}</text>
                <text class="little-font {{type!='password'?'gu-hidden':''}}">{{valueArr[index]?"●":""}}</text>
            </view>
        </view>
    </view>
</view>

/* ttss 组件样式文件 */
篇幅有限，可以通过下方github链接下载源码后查看

下载

一、Github: https://github.com/lianggaoqiang/g-ui

Git拉取到的默认是项目源码，其中ts文件未编译，若使用typescript开发则可以直接引用，js开发则不能直接使用，这种情况有三种解决方案：

1. 修改项目根目录下的project.config.json文件内的setting.useCompilerPlugins为["typescript"]并重启项目，具体可查看文档：Typescript支持
2. 使用tsc指令编译项目内所有ts文件
3. 使用下方的npm方式下载g-ui

二、npm: https://www.npmjs.com/package/@cellent/g-ui

npm install @cellent/g-ui

1. 对下载下来的g-ui包进行构建，此步骤若不明白，可以查看文档：npm支持：构建npm
2. 在需要使用的页面引入该组件

<!-- page.ttml 引用页面的ttml文件 -->
<verify-input focus bold cursor="breathe" maxlength="6" type="text" />

{
    "usingComponents": {
        "verify-input": "ext://@cellent/g-ui/verify-input"
    }
}