| 1 | <script setup lang="ts"> |
| 2 | import { autoResetRef } from '@vueuse/core' |
| 3 | import { computed, ref, watch } from 'vue' |
| 4 | |
| 5 | const a = ref(2) |
| 6 | const b = ref(4) |
| 7 | |
| 8 | const a2 = computed(() => a.value ** 2) |
| 9 | const b2 = computed(() => b.value ** 2) |
| 10 | |
| 11 | const c = computed(() => a2.value + b2.value) |
| 12 | |
| 13 | const a2c = autoResetRef(false, 100) |
| 14 | const b2c = autoResetRef(false, 100) |
| 15 | const cc = autoResetRef(false, 100) |
| 16 | |
| 17 | watch(a, () => a2c.value = true) |
| 18 | watch(b, () => b2c.value = true) |
| 19 | watch([a2, b2], () => cc.value = true) |
| 20 | </script> |
| 21 | |
| 22 | <template> |
| 23 | <div> |
| 24 | <div class="px-6 pt-4 text-xl"> |
| 25 | <b>𝒛=𝒙²+𝒚²</b>={{ a }}x{{ a }}+{{ b }}x{{ b }}={{ c }} |
| 26 | </div> |
| 27 | <div class="relative w-100 h-100"> |
| 28 | <NumBox |
| 29 | v-model:value="a" |
| 30 | label="𝒙" |
| 31 | class="absolute left-5 top-5 from-green-400 to-cyan-500" |
| 32 | :controls="true" |
| 33 | /> |
| 34 | <NumBox |
| 35 | v-model:value="b" |
| 36 | label="𝒚" |
| 37 | class="absolute left-5 top-30 from-green-400 to-cyan-500" |
| 38 | :controls="true" |
| 39 | /> |
| 40 | <NumBox |
| 41 | :value="a2" |
| 42 | label="𝒙²" |
| 43 | class="absolute left-35 top-5 from-blue-400 to-purple-400" |
| 44 | :active="a2c" |
| 45 | /> |
| 46 | <NumBox |
| 47 | :value="b2" |
| 48 | label="𝒚²" |
| 49 | class="absolute left-35 top-30 from-blue-400 to-purple-400" |
| 50 | :active="b2c" |
| 51 | /> |
| 52 | <NumBox |
| 53 | :value="c" |
| 54 | label="𝒛" |
| 55 | class="absolute left-65 top-17.5 from-blue-400 to-purple-400" |
| 56 | :active="cc" |
| 57 | /> |
| 58 | <!-- Line1 --> |
| 59 | <svg |
| 60 | class="absolute left-20 top-10 -z-1" |
| 61 | width="62" |
| 62 | height="1" |
| 63 | viewBox="0 0 62 1" |
| 64 | fill="none" |
| 65 | xmlns="http://www.w3.org/2000/svg" |
| 66 | > |
| 67 | <line |
| 68 | x1="-3.75678e-10" |
| 69 | y1="0.5" |
| 70 | x2="62" |
| 71 | y2="0.5" |
| 72 | stroke="#888888" |
| 73 | stroke-dasharray="5 2" |
| 74 | /> |
| 75 | </svg> |
| 76 | <!-- Line2 --> |
| 77 | <svg |
| 78 | class="absolute left-20 top-40 -z-1" |
| 79 | width="62" |
| 80 | height="1" |
| 81 | viewBox="0 0 62 1" |
| 82 | fill="none" |
| 83 | xmlns="http://www.w3.org/2000/svg" |
| 84 | > |
| 85 | <line |
| 86 | x1="-3.75678e-10" |
| 87 | y1="0.5" |
| 88 | x2="62" |
| 89 | y2="0.5" |
| 90 | stroke="#888888" |
| 91 | stroke-dasharray="5 2" |
| 92 | /> |
| 93 | </svg> |
| 94 | <!-- Arc1 --> |
| 95 | <svg |
| 96 | class="absolute left-50 top-10 -z-1" |
| 97 | width="62" |
| 98 | height="61" |
| 99 | viewBox="0 0 62 61" |
| 100 | fill="none" |
| 101 | xmlns="http://www.w3.org/2000/svg" |
| 102 | > |
| 103 | <path d="M0 0.5C27.5 0.5 39.5 59 61.5 60" stroke="#888888" stroke-dasharray="5 2" /> |
| 104 | </svg> |
| 105 | <!-- Arc2 --> |
| 106 | <svg |
| 107 | class="absolute left-50 top-25 -z-1" |
| 108 | width="62" |
| 109 | height="61" |
| 110 | viewBox="0 0 62 61" |
| 111 | fill="none" |
| 112 | xmlns="http://www.w3.org/2000/svg" |
| 113 | > |
| 114 | <path d="M0 60.5C27.5 60.5 39.5 2 61.5 1" stroke="#888888" stroke-dasharray="5 2" /> |
| 115 | </svg> |
| 116 | </div> |
| 117 | </div> |
| 118 | </template> |
| 119 |