预览图

image.png
image.png

组件源码

父组件

  1. <template>
  2.   <div class="google-verify-content">
  3.     <p>{{ props.title }}</p>
  4.     <GoogleCode @finishCode="getGoogleCode" />
  5.     <div class="login-modal-footer">
  6.       <n-button
  7.         type="tertiary"
  8.         class="login-modal-btn"
  9.         @click="$emit('closeModal')"
  10.         >取消</n-button
  11.       >
  12.       <n-button
  13.         type="primary"
  14.         class="login-modal-btn"
  15.         @click="submitCallback"
  16.         >{{ props.confirmText }}</n-button
  17.       >
  18.     </div>
  19.   </div>
  20. </template>
  22. <script lang="ts" setup>
  23. import { ref } from "vue";
  24. const googleCode = ref("");
  25. let emit = defineEmits(["submitCallback", "closeModal"]);
  26. let props = defineProps({
  27.   title: {
  28.     type: String,
  29.     default: "为保障系统信息和商户资金安全，请您进行谷歌验证",
  30.   },
  31.   confirmText: {
  32.     type: String,
  33.     default: "保存",
  34.   },
  35. });
  38. function submitCallback() {
  39.   emit("submitCallback", googleCode.value);
  40. }
  42. function getGoogleCode(val) {
  43.   googleCode.value = val;
  44. }
  45. </script>

核心子组件-输入窗口

初始版本

  1. <!--
  2.  * @Date: 2022-03-02 14:20:28
  3.  * @LastEditTime: 2022-03-09 17:36:41
  4. -->
  5. <template>
  6.   <div v-bind="$attrs" class="goole-code-box">
  7.     <div id="google-input" class="google-input-content" @click="state.canInput = true">
  8.       <input
  9.         class="input-item"
  10.         :class="{ active: state.canInput && state.inputCodeArr.length === index }"
  11.         v-for="(item, index) in state.inputLengthArr"
  12.         :key="index"
  13.         type="text"
  14.         maxlength="1"
  15.         @input="onChange($event, index)"
  16.         @focus="state.focus = true"
  17.         @blur="state.focus = false"
  18.         v-model="item.content"
  19.       />
  20.       <slot name="get-code-btn"></slot>
  21.     </div>
  22.   </div>
  23. </template>
  24. <script lang="ts" setup>
  25. import { reactive, onMounted, onBeforeUnmount, watchEffect } from "vue";
  26. import _ from "lodash";
  28. let emit = defineEmits(["setGooglecode", "finishCode"]);
  29. let state = reactive({
  30.   inputCodeArr: [],
  31.   canInput: false,
  32.   focus: false,
  33.   inputLengthArr: [
  34.     {
  35.       id: 0,
  36.       content: "",
  37.     },
  38.     {
  39.       id: 1,
  40.       content: "",
  41.     },
  42.     {
  43.       id: 2,
  44.       content: "",
  45.     },
  46.     {
  47.       id: 3,
  48.       content: "",
  49.     },
  50.     {
  51.       id: 4,
  52.       content: "",
  53.     },
  54.     {
  55.       id: 5,
  56.       content: "",
  57.     },
  58.   ],
  59. });
  60. let keyMap = {
  61.   48: "0",
  62.   49: "1",
  63.   50: "2",
  64.   51: "3",
  65.   52: "4",
  66.   53: "5",
  67.   54: "6",
  68.   55: "7",
  69.   56: "8",
  70.   57: "9",
  71. };
  73. let props = defineProps({
  74.   status: {
  75.     type: Boolean,
  76.     default: true,
  77.   },
  78. });
  80. watchEffect(() => {
  81.   if (state.inputCodeArr.length === 0) {
  82.     state.inputLengthArr.forEach((item) => (item.content = ""));
  83.   }
  85.   if (!props.status && !state.focus) {
  86.     console.log("失焦处理");
  87.     state.canInput = false; //外部状态禁用
  88.   }
  89.   if (state.inputCodeArr.length) {
  90.     state.inputLengthArr.forEach((item) => {
  91.       if (item.id === state.inputCodeArr.length - 1) {
  92.         item.content = state.inputCodeArr[item.id];
  93.       }
  94.       if (item.id > state.inputCodeArr.length - 1) {
  95.         item.content = "";
  96.       }
  97.     });
  98.     let outPut = state.inputCodeArr.join("");
  100.     if (state.inputCodeArr.length === 6) {
  101.       state.canInput = false;
  102.       console.log("finishCode", outPut);
  103.       emit("finishCode", outPut);
  104.     }
  105.   }
  106. });
  108. onMounted(() => {
  109.   document.onkeydown = (e) => {
  110.     var keyNum = window.event ? e.keyCode : e.which;
  111.     if (!state.canInput) {
  112.       return;
  113.     }
  114.     if (keyNum === 8) {
  115.       // 删除键盘
  116.       state.inputCodeArr.pop();
  117.       let outPut = state.inputCodeArr.join("");
  118.       console.log(outPut, "outPut");
  119.       emit("setGooglecode", outPut);
  120.       return;
  121.     }
  122.     if (state.inputCodeArr.length === 6) {
  123.       state.canInput = false;
  124.       return;
  125.     }
  127.     // 数字监听
  128.     if (keyMap[keyNum] && state.inputCodeArr.length <= 6) {
  129.       console.log("你输入了" + keyMap[keyNum], state.inputLengthArr);
  130.       state.inputCodeArr.push(keyMap[keyNum]);
  131.       let outPut = state.inputCodeArr.join("");
  132.       emit("setGooglecode", outPut);
  133.     }
  134.   };
  135. });
  137. onBeforeUnmount(() => {
  138.   document.onkeydown = null;
  139. });
  141. const onChange = (event, index) => {
  142.   console.log(event, index);
  143. };
  144. </script>
  • fixed 双数组难以维护的问题
  • 聚焦后无法让下个数组窗口自动聚焦
  • 输入完毕后，修改之前输入窗口的值， 聚焦值和改动值同时改变

版本v1.01

  1. <!--
  2.  * @Date: 2022-03-02 14:20:28
  3.  * @LastEditTime: 2022-04-01 16:37:11
  4. -->
  5. <template>
  6.   <div v-bind="$attrs" class="goole-code-box">
  7.     <div
  8.       id="google-input"
  9.       class="google-input-content"
  10.     >
  11.       <input
  12.         class="input-item"
  13.         :id="nameId(index)"
  14.         :class="{ active:  state.focusIndex === index }"
  15.         v-for="(item, index) in state.inputLengthArr"
  16.         type="text"
  17.         maxlength="1"
  18.         @input="onChange($event, index)"
  19.         @focus="getFocus($event, index)"
  20.         v-model="item.content"
  21.       />
  22.       <slot name="get-code-btn"></slot>
  23.     </div>
  24.   </div>
  25. </template>
  26. <script lang="ts" setup>
  27. import { reactive } from "vue";
  28. import _ from "lodash";
  30. let emit = defineEmits(["finishCode"]);
  31. let state = reactive({
  32.   focusIndex: 0,
  33.   inputLengthArr: [
  34.     {
  35.       id: 0,
  36.       content: "",
  37.     },
  38.     {
  39.       id: 1,
  40.       content: "",
  41.     },
  42.     {
  43.       id: 2,
  44.       content: "",
  45.     },
  46.     {
  47.       id: 3,
  48.       content: "",
  49.     },
  50.     {
  51.       id: 4,
  52.       content: "",
  53.     },
  54.     {
  55.       id: 5,
  56.       content: "",
  57.     },
  58.   ],
  59. });
  61. /**
  62.  * @description: 聚焦问题修改
  63.  * @param {*} event
  64.  * @param {*} index
  65.  * @return {*}
  66.  */
  67. function getFocus(event, index) {
  68.   state.focusIndex = index;
  69. }
  71. function submitGoogle() {
  72.   let virfyLength = _.sumBy(state.inputLengthArr, "content");
  73.   console.log("finishCode", virfyLength);
  74.   emit("finishCode", virfyLength);
  75. }
  77. /**
  78.  * @description: 焦点自动获取优化
  79.  * @param {*} event
  80.  * @param {*} index
  81.  * @return {*}
  82.  */
  83. function onChange(event, index) {
  84.   if (event.data) {
  85.     document.getElementById(nameId(index + 1))?.focus();
  86.     state.focusIndex = index + 1;
  87.   } else {
  88.     if (index === 0) return;
  89.     document.getElementById(nameId(index - 1))?.focus();
  90.     state.focusIndex = index - 1;
  91.   }
  93.   let virfyLength = _.sumBy(state.inputLengthArr, "content");
  94.   if (virfyLength.length === 6) {
  95.     submitGoogle();
  96.   }
  97. }
  99. function nameId(index) {
  100.   return "googel-input" + index;
  101. }
  102. </script>
  103. <style lang="scss" scoped>
  104. .goole-code-box {
  105.   width: 100%;
  106.   .google-input-content {
  107.     display: flex;
  108.     justify-content: space-between;
  109.     flex-wrap: nowrap;
  110.     input.input-item {
  111.       background: var(--n-close-color-hover);
  112.       border-radius: 8px 8px 8px 8px;
  113.       opacity: 0.3;
  114.       text-align: center;
  115.       outline: none;
  116.       height: 0.75rem;
  117.       width: 0.75rem;
  118.       font-size: 30px;
  119.       color: #ffffff;
  120.       border: none;
  121.     }
  122.     input.active {
  123.       border: 2px solid $default-primary !important;
  124.       -moz-box-shadow: 1px 1px 7px var(--n-color-hover);
  125.       -webkit-box-shadow: 1px 1px 7px var(--n-color-hover);
  126.       box-shadow: 1px 1px 7px var(--n-color-hover);
  127.     }
  128.     input::-webkit-outer-spin-button,
  129.     input::-webkit-inner-spin-button {
  130.       // chrome
  131.       -webkit-appearance: none;
  132.       appearance: none;
  133.       margin: 0;
  134.     }
  135.     input {
  136.       // 火狐
  137.       -moz-appearance: textfield;
  138.     }
  139.   }
  140. }
  141. </style>

image.png

  • v1.01保证正常功能使用，但在实际场景中存在使用问题
  • 没有一键复制功能

版本v2.01

  1. <template>
  2.   <div v-bind="$attrs" class="goole-code-box">
  3.     <div
  4.       id="google-input"
  5.       class="google-input-content"
  6.     >
  7.       <input
  8.         class="input-item"
  9.         :id="nameId(index)"
  10.         :class="{ active:  state.focusIndex === index }"
  11.         v-for="(item, index) in state.inputLengthArr"
  12.         type="text"
  13.         maxlength="1"
  14.         autocomplete="off"
  15.         :onkeydown="onkeydown"
  16.         @input="onChange($event, index)"
  17.         @focus="getFocus($event, index)"
  18.         v-model="item.content"
  19.       />
  20.       <slot name="get-code-btn"></slot>
  21.     </div>
  22.   </div>
  23. </template>
  1. <script lang="ts" setup>
  2. import { reactive } from "vue";
  3. import { readClipboard, clearClipboard } from "@/utils/copy";
  4. import _ from "lodash";
  6. let emit = defineEmits(["finishCode"]);
  7. let state = reactive({
  8.   focusIndex: 0,
  9.   inputLengthArr: [
  10.     {
  11.       id: 0,
  12.       content: "",
  13.     },
  14.     {
  15.       id: 1,
  16.       content: "",
  17.     },
  18.     {
  19.       id: 2,
  20.       content: "",
  21.     },
  22.     {
  23.       id: 3,
  24.       content: "",
  25.     },
  26.     {
  27.       id: 4,
  28.       content: "",
  29.     },
  30.     {
  31.       id: 5,
  32.       content: "",
  33.     },
  34.   ],
  35. });
  37. clearClipboard();
  40. function readCode() {
  41.   readClipboard()
  42.     .then((res) => {
  43.       let boardStr = res;
  44.       if (boardStr.length === 6) {
  45.         emit("finishCode", boardStr);
  46.         state.inputLengthArr.forEach((item, index) => {
  47.           item.content = boardStr.charAt(index);
  48.         });
  49.       }
  50.     })
  51.     .catch((err) => console.warn(err));
  52. }
  54. /**
  55.  * @description: 聚焦问题修改
  56.  * @param {*} event
  57.  * @param {*} index
  58.  * @return {*}
  59.  */
  60. function getFocus(event:Event, index:number) {
  61.    if (index === 0) {
  62.     readCode();
  63.   }
  64.   state.focusIndex = index;
  65. }
  68. function onkeydown(event:Event) {
  69.   if (state.focusIndex === 0) return true;
  70.   if( event.keyCode === 8) {
  71.     clearClipboard();
  72.   }
  73.   console.log(event.keyCode , state.inputLengthArr[state.focusIndex]);
  74.   if (
  75.     state.inputLengthArr[state.focusIndex].content === "" &&
  76.     event.keyCode === 8
  77.   ) {
  78.     document.getElementById(nameId(state.focusIndex - 1))?.focus();
  79.     state.focusIndex = state.focusIndex - 1;
  80.   }
  81. }
  83. function submitGoogle() {
  84.   let virfyLength = _.sumBy(state.inputLengthArr, "content");
  85.   emit("finishCode", virfyLength);
  86. }
  88. /**
  89.  * @description: 焦点自动获取优化
  90.  * @param {*} event
  91.  * @param {*} index
  92.  * @return {*}
  93.  */
  94. function onChange(event, index) {
  95.   if (event.data) {
  96.     document.getElementById(nameId(index + 1))?.focus();
  97.     state.focusIndex = index + 1;
  98.   } else {
  99.     if (index === 0) return;
  100.     document.getElementById(nameId(index - 1))?.focus();
  101.     state.focusIndex = index - 1;
  102.   }
  104.   let virfyLength = _.sumBy(state.inputLengthArr, "content");
  105.   if (virfyLength.length === 6) {
  106.     submitGoogle();
  107.   }
  108. }
  110. function nameId(index) {
  111.   return "googel-input" + index;
  112. }
  113. </script>

依赖自定义工具函数-一键复制(原生)
关于复制到粘贴板