uni-points.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <template>
  2. <uni-popup ref="popupRef" :mask-background-color="popup_background_color">
  3. 答对: {{data.right}}题,
  4. 答错:{{data.wrong}}题
  5. 已成功获得 {{data.jifen}}积分
  6. <button @click="checkAnswer">查看试题</button>
  7. <button @click="goStudyContinue">继续学习</button>
  8. </uni-popup>
  9. </template>
  10. <script setup>
  11. import {
  12. ref,
  13. reactive
  14. } from "vue"
  15. const popupRef = ref(null)
  16. const popup_background_color = `rgba(0,0,0,0.2)`; // 【弹出框模态层背景颜色】
  17. const emits = defineEmits(['checkAnswer', 'goStudy']);
  18. const data = reactive({
  19. right: 0,
  20. wrong: 0,
  21. jifen: 0
  22. })
  23. // 切换成绩
  24. function showPopup({
  25. right,
  26. wrong,
  27. jifen
  28. }) {
  29. data.right = right;
  30. data.wrong = wrong;
  31. data.jifen = jifen;
  32. popupRef.value.open()
  33. }
  34. function closePopup() {
  35. popupRef.value.close()
  36. }
  37. // 查看答案
  38. function checkAnswer() {
  39. emits('checkAnswer');
  40. closePopup();
  41. }
  42. // 继续学习
  43. function goStudyContinue() {
  44. emits('goStudy');
  45. closePopup();
  46. }
  47. defineExpose({
  48. showPopup
  49. })
  50. </script>
  51. <style>
  52. </style>