重新整理

package-lock.json

@@ -14,6 +14,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.0.3",
+        "vconsole": "^3.15.0",
         "vite": "^3.0.9"
       }
     },
@@ -28,6 +29,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "dev": true,
+      "dependencies": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
@@ -180,6 +193,29 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
+    "node_modules/copy-text-to-clipboard": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz",
+      "integrity": "sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/core-js": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
+      "integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
@@ -599,6 +635,12 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/mutation-observer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz",
+      "integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==",
+      "dev": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -694,6 +736,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -760,6 +808,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/vconsole": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.0.tgz",
+      "integrity": "sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "copy-text-to-clipboard": "^3.0.1",
+        "core-js": "^3.11.0",
+        "mutation-observer": "^1.0.3"
+      }
+    },
     "node_modules/vite": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz",
@@ -842,6 +902,15 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
       "integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg=="
     },
+    "@babel/runtime": {
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.13.11"
+      }
+    },
     "@esbuild/android-arm": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
@@ -967,6 +1036,18 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
+    "copy-text-to-clipboard": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz",
+      "integrity": "sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==",
+      "dev": true
+    },
+    "core-js": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
+      "integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw==",
+      "dev": true
+    },
     "csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
@@ -1186,6 +1267,12 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "mutation-observer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz",
+      "integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==",
+      "dev": true
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -1229,6 +1316,12 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -1270,6 +1363,18 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "vconsole": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.0.tgz",
+      "integrity": "sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "copy-text-to-clipboard": "^3.0.1",
+        "core-js": "^3.11.0",
+        "mutation-observer": "^1.0.3"
+      }
+    },
     "vite": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz",

package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.3",
+    "vconsole": "^3.15.0",
     "vite": "^3.0.9"
   }
 }

src/App.vue

@@ -3,9 +3,36 @@ import {RouterLink, RouterView} from 'vue-router'
 </script>
 
 <template>
-  <RouterView/>
+  <div class="menu">
+    <ol>
+      <li>
+        <router-link to="/">首页</router-link>
+      </li>
+      <li>
+        <router-link to="/calc">计算器</router-link>
+      </li>
+    </ol>
+  </div>
+  <div class="emulator">
+    <RouterView/>
+  </div>
+
 </template>
 
 <style scoped>
+.menu {
+  float: left;
+}
 
+.emulator {
+  position: fixed;
+  right: 50px;
+  top: 50px;
+  width: 390px;
+  height: 844px;
+  padding: 10px;
+  border: darkgray solid 1px;
+  border-radius: 5px;
+  overflow-y: scroll;
+}
 </style>

src/assets/main.css

@@ -1,7 +1,24 @@
 @import "./base.css";
 
 #app {
-    max-width: 1280px;
-    margin: 0 auto;
+    padding: 50px;
     font-weight: normal;
 }
+
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+/* 滚动槽 */
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.8);
+    -webkit-box-shadow: inset 0 0 3px RGB(243, 243, 244);
+}

src/main.js

@@ -1,11 +1,15 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import {createApp} from 'vue'
+import {createPinia} from 'pinia'
 
 import App from './App.vue'
 import router from './router'
 
 import './assets/main.css'
 
+import VConsole from 'vconsole';
+
+const vConsole = new VConsole();
+
 const app = createApp(App)
 
 app.use(createPinia())

src/views/CalcView.vue

@@ -3,54 +3,81 @@
     <div class="view">
       <input type="text" v-model="text"/>
     </div>
-    <p style="width:100vw">{{text}}</p>
-    <div class="btn" @click="typ('+')">+</div>
-    <div class="btn" @click="typ('-')">-</div>
-    <div class="btn" @click="typ('x')">×</div>
-    <div class="btn" @click="typ('÷')">÷</div>
-    <div class="btn" @click="typ('7')">7</div>
-    <div class="btn" @click="typ('8')">8</div>
-    <div class="btn" @click="typ('9')">9</div>
-    <div class="btn"></div>
-    <div class="btn" @click="typ('4')">4</div>
-    <div class="btn" @click="typ('5')">5</div>
-    <div class="btn" @click="typ('6')">6</div>
+    <div class="btn" @click="typ('+')"><span>+</span></div>
+    <div class="btn" @click="typ('-')"><span>-</span></div>
+    <div class="btn" @click="typ('x')"><span>×</span></div>
+    <div class="btn" @click="typ('÷')"><span>÷</span></div>
+
+    <div class="btn" @click="typ('7')"><span>7</span></div>
+    <div class="btn" @click="typ('8')"><span>8</span></div>
+    <div class="btn" @click="typ('9')"><span>9</span></div>
     <div class="btn"></div>
-    <div class="btn" @click="typ('1')">1</div>
-    <div class="btn" @click="typ('2')">2</div>
-    <div class="btn" @click="typ('3')">3</div>
+
+    <div class="btn" @click="typ('4')"><span>4</span></div>
+    <div class="btn" @click="typ('5')"><span>5</span></div>
+    <div class="btn" @click="typ('6')"><span>6</span></div>
     <div class="btn"></div>
-    <div class="btn" @click="typ('0')">0</div>
+
+    <div class="btn" @click="typ('1')"><span>1</span></div>
+    <div class="btn" @click="typ('2')"><span>2</span></div>
+    <div class="btn" @click="typ('3')"><span>3</span></div>
+    <div class="btn" @click="clear"><span>Clear</span></div>
+
+    <div class="btn" @click="typ('0')"><span>0</span></div>
     <div class="btn"></div>
-    <div class="btn" @click="typ('.')">.</div>
-    <div class="btn" @click="typ('=')">=</div>
+    <div class="btn" @click="typ('.')"><span>.</span></div>
+    <div class="btn" @click="typ('=')"><span>=</span></div>
   </div>
 </template>
 
 <script setup name="calc">
-  import {ref} from "vue"
-  const text = ref("")
-  const active = ref(false)
-  const res = ref(0)
-  const typ = (t) => {
-    text.value = text.value + t
-    switch t:
-    case "1":
-      res.value = 1
-      
-    active.value = !active.value
+import {ref} from "vue"
+
+const text = ref("") // 显示的内容
+const result = ref("") // 实际计算的内容
+const restart = ref(false) // 是否需要重置标记
+
+const typ = (t) => {
+  if (restart.value) clear() // 判断是否需要重置
+
+  text.value = text.value + t
+
+  switch (t) {
+    case "x":
+      result.value += '*'
+      break
+    case "÷":
+      result.value += '/'
+      break
+    case "=":
+      result.value = eval(result.value)
+      text.value = result.value
+      restart.value = true // 计算完成后进行标记计算器下次计算需要重置
+      break
+    default:
+      result.value = result.value + t
   }
+}
+
+// 重置计算器的值
+const clear = function () {
+  result.value = ""
+  text.value = ""
+  restart.value = false // 复位重置标记
+}
 </script>
 
 <style scoped>
 .calc {
   display: flex;
   flex-wrap: wrap;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .view {
-  width: 100vw;
-  height: 30vw;
+  width: 100%;
+  height: 100px;
 }
 
 .view input {
@@ -59,17 +86,29 @@
 }
 
 .btn {
-  width: 25vw;
-  height: 25vw;
+  position: relative;
+  width: 25%;
+  height: 0;
+  padding-top: 25%;
   border: 1px solid #2c3e50;
   box-sizing: border-box;
-  line-height: 25vw;
   font-size: 30px;
   text-align: center;
   cursor: pointer;
 }
 
-.active{
-  border:5px solid #ff0;
+.btn > * {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.active {
+  border: 5px solid #ff0;
 }
 </style>

src/views/HomeView.vue

@@ -4,6 +4,6 @@ import TheWelcome from '../components/TheWelcome.vue'
 
 <template>
   <main>
-    <TheWelcome />
+    Web前端实践演示案例
   </main>
 </template>