Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

verification-codeInput.vue 3.6 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <view class="verifical-input">
  3. <input
  4. class="verifical-input-hidden"
  5. type="number"
  6. :maxlength="blockNum"
  7. :focus="isFucus"
  8. hold-keyboard="true"
  9. @input = "changeCodeInput"
  10. v-model="inputCode"
  11. value="" />
  12. <view class="verifical-input-real">
  13. <block v-for="(item,index) in blockNum" :key="index">
  14. <view :class="['real-block',{'block-active':index === activeIndex && codeType == 'block','line-active':index === activeIndex && codeType == 'line','block-arror':errorType},codeType == 'block'?'block-content':'line-content']">
  15. <text class="real-block-line" v-if="index === activeIndex || (errorType && index === 0)"></text>
  16. <text class="real-block-number">{{inputText[index]}}</text>
  17. </view>
  18. </block>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. export default {
  24. props:{
  25. //验证码个数
  26. blockNum:{
  27. type:Number,
  28. default:4
  29. },
  30. //验证码类型
  31. codeType:{
  32. type:String,
  33. default:'block'
  34. },
  35. /* isFocus:{
  36. type:Number,
  37. default:4
  38. } */
  39. },
  40. data() {
  41. return {
  42. activeIndex:0, //激活的方块
  43. inputText:'', //输入的验证码
  44. isFucus:true, //是否自动聚焦
  45. inputCode:'', //输入的值
  46. errorType:false //错误提示
  47. }
  48. },
  49. watch: {
  50. errorType: {
  51. immediate: true,
  52. handler: function(newValue) {
  53. if (newValue === true) {
  54. this.inputText.length = 0;
  55. this.inputCode = '';
  56. this.isFucus = true;
  57. }
  58. }
  59. }
  60. },
  61. methods: {
  62. changeCodeInput(event){
  63. this.errorType = false;
  64. this.inputText = (event.target.value).split('');
  65. this.activeIndex = this.inputText.length;
  66. if(this.activeIndex == this.blockNum){
  67. this.isFucus = false;
  68. this.$emit('verificationCode',event.target.value)
  69. }
  70. }
  71. }
  72. }
  73. </script>
  74. <style lang="scss" scoped>
  75. $main-color:blue;/* 主题色 */
  76. $error-color:red;/* 错误颜色 */
  77. .flex-row{
  78. display: flex;
  79. flex-direction: row;
  80. align-items: center;
  81. justify-content: center;
  82. }
  83. .flex-column{
  84. display: flex;
  85. flex-direction: column;
  86. align-items: center;
  87. justify-content: center;
  88. }
  89. .verifical-input{
  90. position: relative;
  91. overflow: hidden;
  92. padding: 0 5px;
  93. .verifical-input-hidden{
  94. position: absolute;
  95. top:0;
  96. left:-200%;
  97. width: 300%;
  98. height: 100%;
  99. background: none;
  100. color: #FFFFFF;
  101. }
  102. .verifical-input-real{
  103. width: 100%;
  104. @extend .flex-row;
  105. .real-block{
  106. width: 100rpx;
  107. height: 100rpx;
  108. margin-right: 20rpx;
  109. &:last-child{
  110. margin-right: 0;
  111. }
  112. @extend .flex-row;
  113. .real-block-line{
  114. display: inline-block;
  115. width: 6rpx;
  116. height: 46rpx;
  117. background: #333333;
  118. animation: line 1s infinite ease;
  119. }
  120. .real-block-number{
  121. font-size: 48rpx;
  122. font-weight: 600;
  123. }
  124. }
  125. .line-content{
  126. border-bottom: 2rpx solid rgba(187, 187, 187, 100);
  127. }
  128. .block-content{
  129. border-radius: 12rpx;
  130. border: 2rpx solid rgba(187, 187, 187, 100);
  131. }
  132. .block-active{
  133. border: 4rpx solid $main-color!important;
  134. }
  135. .line-active{
  136. border-bottom: 2rpx solid $main-color;
  137. }
  138. }
  139. }
  140. /* 错误弹框 */
  141. .block-arror{
  142. border-color: $error-color!important;
  143. animation: error .5s ease;
  144. }
  145. @keyframes line {
  146. 0% {
  147. opacity: .9;
  148. },
  149. 50% {
  150. opacity: 0;
  151. },
  152. 100% {
  153. opacity: .9;
  154. }
  155. }
  156. @keyframes error {
  157. 0% {
  158. transform: translateX(-5px);
  159. },
  160. 20% {
  161. transform: translateX(5px);
  162. },
  163. 40% {
  164. transform: translateX(-5px);
  165. },
  166. 60% {
  167. transform: translateX(5px);
  168. },
  169. 80% {
  170. transform: translateX(-5px);
  171. },
  172. 100% {
  173. transform: translateX(0);
  174. }
  175. }
  176. </style>