beiPage.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <view>
  3. <!-- 单词区 -->
  4. <selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
  5. <!-- 显示区 -->
  6. <selectTypesVue activeSelect="2"></selectTypesVue>
  7. <!-- 输入区 -->
  8. <view></view>
  9. <!-- 解释区 -->
  10. <view>
  11. {{activeWord.jianyi.join(';')}}
  12. </view>
  13. <!-- 音标区 -->
  14. <view></view>
  15. <!-- 浮层输入区 -->
  16. <view></view>
  17. </view>
  18. </template>
  19. <script setup>
  20. import selectWordsVue from './selectWords.vue';
  21. import selectTypesVue from './selectTypes.vue';
  22. import {
  23. reactive,
  24. computed
  25. } from 'vue';
  26. const props = defineProps({
  27. activeWord: { // 单词数据
  28. type: Object,
  29. },
  30. activeWords: {
  31. type: Array
  32. },
  33. })
  34. const data = reactive({
  35. answer: '',
  36. result: false, // 正确性
  37. })
  38. // 选择单词
  39. function handleSelect(word) {
  40. data.answer+=word;
  41. }
  42. function checkIsRight() {
  43. if (data.answer == props.activeWord.value) {
  44. data.result = true;
  45. noticeBackDb()
  46. } else {
  47. data.result = false;
  48. }
  49. }
  50. function noticeBackDb() {
  51. // 通知后台已学完当前单词
  52. }
  53. function handleReset() {
  54. data.answer = '';
  55. }
  56. </script>
  57. <style>
  58. </style>