Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
527 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| # CodeInput 验证码输入框 | ||
|
|
||
| ### 介绍 | ||
|
|
||
| 一般用于验证用户短信验证码的场景，该组件参考了 uview-ui 的 [验证码输入框](https://www.uviewui.com/components/codeInput.html)。 | ||
|
|
||
| ### 基础用法 | ||
|
|
||
| ```html | ||
| <template> | ||
| <nut-code-input v-model="state.val1" /> | ||
| </template> | ||
| ``` | ||
|
|
||
| ### 横线模式 | ||
|
|
||
| ```html | ||
| <template> | ||
| <nut-code-input v-model="state.val1" mode="line" /> | ||
| </template> | ||
| ``` | ||
|
|
||
| ### 设置长度 | ||
|
|
||
| ```html | ||
| <template> | ||
| <nut-code-input v-model="state.val2" :maxlength="6" /> | ||
| </template> | ||
| ``` | ||
|
|
||
| ### 横线间距 | ||
|
|
||
| ```html | ||
| <template> | ||
| <nut-code-input v-model="state.val2" :space="0" /> | ||
| </template> | ||
| ``` | ||
|
|
||
| ### 调整颜色 | ||
|
|
||
| ```html | ||
| <template> | ||
| <nut-code-input v-model="state.val3" hairline custom-color="#f56c6c" border-color="#f56c6c" /> | ||
| </template> | ||
| ``` | ||
|
|
||
| ### 快捷选择-范围选择 | ||
|
|
||
| ```html | ||
| <template> | ||
| <nut-code-input @change="change" @finish="finish" /> | ||
| </template> | ||
| <script lang="ts"> | ||
| import { reactive, toRefs } from 'vue'; | ||
| export default { | ||
| setup() { | ||
| function change(e: any) { | ||
| console.log(`内容改变，当前值为：${e}`) | ||
| } | ||
| function finish(e: any) { | ||
| console.log(`输入结束，当前值为：${e}`) | ||
| } | ||
| return { | ||
| change | ||
| finish | ||
| }; | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
||
| ### Props | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | | ||
| |-------------------|---------------------------------------------------|-----------------|-----------------| | ||
| | v-model | 输入值，双向绑定 | string | - | | ||
| | adjustPosition | 键盘弹起时，是否自动上推页面 | Boolean | `false` | | ||
| | maxlength |输入字符个数 | `String \| Number` | `4` | | ||
| | dot | 是否用圆点填充 | boolean | `false` | | ||
| | mode | 选择样式为边框或者横线 | `box \| line` | `box` | | ||
| | hairline | 是否细边框 | Boolean | `false` | ||
| | space | 字符间的距离 | `String \| Number` | `10` | | ||
| | focus | 是否自动获取焦点 | Boolean | `false` | | ||
| | custom-color | 字体颜色 | String | `#606266` | | ||
| | font-size | 字体大小，单位rpx | `String \| Number` | `18` | | ||
| | size | 输入框的大小，宽等于高 | `String \| Number` | `35` | | ||
| | disabledKeyboard | 禁止点击输入框唤起系统键盘 | Boolean | `false` | | ||
| | border-color | 边框和线条颜色 | String | `#c9cacc` | | ||
| | disabledDot | 是否禁止输入"."符号 | boolean | `true` | | ||
|
|
||
| ### Events | ||
|
|
||
| | 事件名 | 说明 | 回调参数 | | ||
| |--------|------------------------------|------------------------------| | ||
| | change | 输入内容发生改变时触发，具体见上方说明 | `string` | | ||
| | finish | 输入字符个数达maxlength值时触发，见上方说明 | `string` | | ||
|
|
||
| ## 主题定制 | ||
|
|
||
| ### 样式变量 | ||
|
|
||
| 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/components/basic/configprovider)。 | ||
|
|
||
| | 名称 | 默认值 | | ||
| | --------------------------------------- | -------------------------- | | ||
| | --nut-code-input-cursor-width | _var(--nut-code-input-cursor-width)_ | | ||
| | --nut-code-input-cursor-height| _var(--nut-code-input-cursor-height)_ | | ||
| | --nut-code-input-cursor-animation-duration| _1s_ | | ||
| | --nut-code-input-cursor-animation-name| _nut-cursor-flicker_ | | ||
| | --nut-code-input-content-color| _var(--nut-code-content-color)_ | | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| <script setup lang="ts"> | ||
| const state = reactive({ | ||
| val1: '', | ||
| val2: '', | ||
| val3: '', | ||
| val4: '', | ||
| }) | ||
| function change(e: any) { | ||
| // eslint-disable-next-line no-console | ||
| console.log(`内容改变，当前值为：${e}`) | ||
| } | ||
| function finish(e: any) { | ||
| uni.showToast({ | ||
| title: `输入结束，当前值为：${e}`, | ||
| icon: 'none', | ||
| }) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="demo"> | ||
| <h2 class="title"> | ||
| 基础用法 | ||
| </h2> | ||
| <nut-code-input v-model="state.val1" /> | ||
|
|
||
| <h2 class="title"> | ||
| 横线模式 | ||
| </h2> | ||
| <nut-code-input v-model="state.val1" mode="line" /> | ||
| <h2 class="title"> | ||
| 设置长度 | ||
| </h2> | ||
| <nut-code-input v-model="state.val2" :maxlength="6" /> | ||
|
|
||
| <h2 class="title"> | ||
| 横线间距 | ||
| </h2> | ||
| <nut-code-input v-model="state.val2" :space="0" /> | ||
| <h2 class="title"> | ||
| 细边框 | ||
| </h2> | ||
| <nut-code-input v-model="state.val2" mode="box" :space="0" :maxlength="4" hairline /> | ||
|
|
||
| <h2 class="title"> | ||
| 调整颜色 | ||
| </h2> | ||
| <nut-code-input v-model="state.val3" hairline custom-color="#f56c6c" :border-color="`#f56c6c` as any" /> | ||
|
|
||
| <h2 class="title"> | ||
| 用"●"替代输入内容 | ||
| </h2> | ||
| <nut-code-input v-model="state.val3" dot /> | ||
|
|
||
| <h2 class="title"> | ||
| 是否自动获取焦点 | ||
| </h2> | ||
| <nut-code-input v-model="state.val4" :focus="true" /> | ||
|
|
||
| <h2 class="title"> | ||
| 事件演示 | ||
| </h2> | ||
| <nut-code-input @change="change" @finish="finish" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <route lang="json"> | ||
| { | ||
| "style": { | ||
| "navigationBarTitleText": "CodeInput" | ||
| } | ||
| } | ||
| </route> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import type { ExtractPropTypes, PropType } from 'vue' | ||
| import { isString } from '../_utils' | ||
|
|
||
| export const codeinputProps = { | ||
| // 键盘弹起时，是否自动上推页面 | ||
| adjustPosition: { | ||
| type: Boolean, | ||
| default: true, | ||
| }, | ||
| // 最大输入长度 | ||
| maxlength: { | ||
| type: [String, Number], | ||
| default: 4, | ||
| }, | ||
| // 是否用圆点填充 | ||
| dot: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| // 显示模式，box-盒子模式，line-底部横线模式 | ||
| mode: { | ||
| type: String as PropType<'box' | 'line'>, | ||
| default: 'box', | ||
| }, | ||
| // 是否细边框 | ||
| hairline: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| // 字符间的距离 | ||
| space: { | ||
| type: [String, Number], | ||
| default: 10, | ||
| }, | ||
| // 预置值 | ||
| modelValue: { | ||
| type: [String, Number], | ||
| default: '', | ||
| }, | ||
| // 是否自动获取焦点 | ||
| focus: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| // 字体是否加粗 | ||
| bold: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| // 字体颜色 | ||
| customColor: { | ||
| type: String, | ||
| default: '#606266', | ||
| }, | ||
| // 字体大小 | ||
| fontSize: { | ||
| type: [String, Number], | ||
| default: 18, | ||
| }, | ||
| // 输入框的大小，宽等于高 | ||
| size: { | ||
| type: [String, Number], | ||
| default: 35, | ||
| }, | ||
| // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true | ||
| disabledKeyboard: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| // 边框和线条颜色 | ||
| borderColor: { | ||
| type: String, | ||
| default: '#c9cacc', | ||
| }, | ||
| // 是否禁止输入"."符号 | ||
| disabledDot: { | ||
| type: Boolean, | ||
| default: true, | ||
| }, | ||
| } | ||
|
|
||
| export type CodeInputProps = ExtractPropTypes<typeof codeinputProps> | ||
|
|
||
| export const codeinputEmits = { | ||
| change: (val: string) => isString(val), | ||
| input: (val: string) => isString(val), | ||
| finish: (val: string) => isString(val), | ||
| } | ||
|
|
||
| export type CodeInputEmits = typeof codeinputEmits |
Oops, something went wrong.