feat:添加生成文本模块

src/assets/js/createText.js

+class CreateText {
+  constructor(
+    practiceLetters = "ENITRL",
+    keyLetter = "E",
+    minLength = 3,
+    maxLenth = 6
+  ) {
+    this.practiceLetters = practiceLetters;
+    this.keyLetter = keyLetter;
+    this.minLength = minLength;
+    this.maxLenth = maxLenth;
+  }
+  // 长度
+  length() {
+    return Math.floor(
+      Math.random() * (this.maxLenth - this.minLength) + this.minLength + 1
+    );
+  }
+  // 生成字母组
+  create() {
+    const len = this.length();
+    const randomPosition = Math.floor(Math.random() * len);
+    let str = "";
+    for (let i = 0; i < len; i++) {
+      str += randomPosition === i ? this.keyLetter : this.getOneRandomLetter();
+    }
+    return str;
+  }
+  // 随机取一个字母
+  getOneRandomLetter() {
+    const letters = this.practiceLetters;
+    const len = letters.length;
+    return letters[Math.floor(Math.random() * len)];
+  }
+}
+
+export default new CreateText();

src/components/key.vue → src/components/index/key.vue

 <template>
   <div
-    :class="['key', { active: isCurrentKey($store.state.currentKey) }]"
+    :class="['key', { active: iscurrentLetter($store.state.currentLetter) }]"
     :style="{
       'min-width': keyWidth + 'px',
       flex: type === 'Fill' ? 1 : 'none'
@@ -58,7 +58,7 @@ export default {
     }
   },
   methods: {
-    isCurrentKey(key) {
+    iscurrentLetter(key) {
       if (key === null) return false;
       return key.toLowerCase() === this.primaryName.toLowerCase();
     }

src/components/keyboard.vue → src/components/index/keyboard.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import key from "@/components/key.vue";
+import key from "@/components/index/key.vue";
 import mock from "@/assets/js/mock";
 export default {
   components: { key },

src/components/index/text.vue

+<template>
+  <div>
+    {{ text }}
+  </div>
+</template>
+
+<script>
+import CreateText from "@/assets/js/createText";
+export default {
+  data() {
+    return {
+      length: 20,
+      text: "",
+    };
+  },
+  created() {
+    this.createTextList();
+  },
+  methods: {
+    createTextList() {
+      const arr = new Array(this.length).fill(0);
+      const res = arr.map(() => CreateText.create());
+      this.text = res.join(" ").toLowerCase();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/store/index.js

@@ -5,14 +5,16 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    currentKey: ""
+    currentLetter: "", // 当前按下按键
+    practiceLetters: "ENITRL", // 预设练习按键组
+    keyLetter: "E" // 预设重点练习按键
   },
   mutations: {
     onkeydown(state, val) {
-      state.currentKey = val;
+      state.currentLetter = val;
     },
     onkeyup(state) {
-      state.currentKey = null;
+      state.currentLetter = null;
     }
   },
   actions: {},

src/views/index.vue

 <template>
   <div class="index">
     <div class="col-9">
+      <text-component />
       <keyboard />
     </div>
     <div class="col-3"></div>
@@ -8,10 +9,11 @@
 </template>
 
 <script>
-import keyboard from "@/components/keyboard.vue";
+import textComponent from "@/components/index/text.vue";
+import keyboard from "@/components/index/keyboard.vue";
 export default {
   name: "Home",
-  components: { keyboard }
+  components: { keyboard, textComponent }
 };
 </script>