123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252 |
- <template>
- <view class="u-code-input">
- <view
- class="u-code-input__item"
- :style="[itemStyle(index)]"
- v-for="(item, index) in codeLength"
- :key="index"
- >
- <view
- class="u-code-input__item__dot"
- v-if="dot && codeArray.length > index"
- ></view>
- <text
- v-else
- :style="{
- fontSize: $u.addUnit(fontSize),
- fontWeight: bold ? 'bold' : 'normal',
- color: color
- }"
- >{{codeArray[index]}}</text>
- <view
- class="u-code-input__item__line"
- v-if="mode === 'line'"
- :style="[lineStyle]"
- ></view>
-
- <view v-if="isFocus && codeArray.length === index" :style="{backgroundColor: color}" class="u-code-input__item__cursor"></view>
-
- </view>
- <input
- :disabled="disabledKeyboard"
- type="number"
- :focus="focus"
- :value="inputValue"
- :maxlength="maxlength"
- :adjustPosition="adjustPosition"
- class="u-code-input__input"
- @input="inputHandler"
- :style="{
- height: $u.addUnit(size)
- }"
- @focus="isFocus = true"
- @blur="isFocus = false"
- />
- </view>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: 'u-code-input',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
- inputValue: '',
- isFocus: this.focus
- }
- },
- watch: {
- value: {
- immediate: true,
- handler(val) {
-
- this.inputValue = String(val).substring(0, this.maxlength)
- }
- },
- },
- computed: {
-
- codeLength() {
- return new Array(Number(this.maxlength))
- },
-
- itemStyle() {
- return index => {
- const addUnit = uni.$u.addUnit
- const style = {
- width: addUnit(this.size),
- height: addUnit(this.size)
- }
-
- if (this.mode === 'box') {
-
- style.border = `${this.hairline ? 0.5 : 1}px solid ${this.borderColor}`
-
- if (uni.$u.getPx(this.space) === 0) {
-
- if (index === 0) {
- style.borderTopLeftRadius = '3px'
- style.borderBottomLeftRadius = '3px'
- }
- if (index === this.codeLength.length - 1) {
- style.borderTopRightRadius = '3px'
- style.borderBottomRightRadius = '3px'
- }
-
- if (index !== this.codeLength.length - 1) {
- style.borderRight = 'none'
- }
- }
- }
- if (index !== this.codeLength.length - 1) {
-
- style.marginRight = addUnit(this.space)
- } else {
-
- style.marginRight = 0
- }
- return style
- }
- },
-
- codeArray() {
- return String(this.inputValue).split('')
- },
-
- lineStyle() {
- const style = {}
- style.height = this.hairline ? '2px' : '4px'
- style.width = uni.$u.addUnit(this.size)
-
- style.backgroundColor = this.borderColor
- return style
- }
- },
- methods: {
-
- inputHandler(e) {
- const value = e.detail.value
- this.inputValue = value
-
- if(this.disabledDot) {
- this.$nextTick(() => {
- this.inputValue = value.replace('.', '')
- })
- }
-
- this.$emit('change', value)
-
- this.$emit('input', value)
-
- if (String(value).length >= Number(this.maxlength)) {
- this.$emit('finish', value)
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- $u-code-input-cursor-width: 1px;
- $u-code-input-cursor-height: 40%;
- $u-code-input-cursor-animation-duration: 1s;
- $u-code-input-cursor-animation-name: u-cursor-flicker;
- .u-code-input {
- @include flex;
- position: relative;
- overflow: hidden;
- &__item {
- @include flex;
- justify-content: center;
- align-items: center;
- position: relative;
- &__text {
- font-size: 15px;
- color: $u-content-color;
- }
- &__dot {
- width: 7px;
- height: 7px;
- border-radius: 100px;
- background-color: $u-content-color;
- }
- &__line {
- position: absolute;
- bottom: 0;
- height: 4px;
- border-radius: 100px;
- width: 40px;
- background-color: $u-content-color;
- }
- /* #ifndef APP-PLUS */
- &__cursor {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- width: $u-code-input-cursor-width;
- height: $u-code-input-cursor-height;
- animation: $u-code-input-cursor-animation-duration u-cursor-flicker infinite;
- }
- /* #endif */
-
- }
- &__input {
- // 之所以需要input输入框,是因为有它才能唤起键盘
- // 这里将它设置为两倍的屏幕宽度,再将左边的一半移出屏幕,为了不让用户看到输入的内容
- position: absolute;
- left: -750rpx;
- width: 1500rpx;
- top: 0;
- background-color: transparent;
- text-align: left;
- }
- }
-
- /* #ifndef APP-PLUS */
- @keyframes u-cursor-flicker {
- 0% {
- opacity: 0;
- }
- 50% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- /* #endif */
- </style>
|