toast效果

src/App.vue

@@ -1,10 +1,15 @@
 <template>
   <router-view />
+  <teleport to="body">
+    <ToastComp v-if="isShowToast" />
+  </teleport>
 </template>
 
 <script setup>
 // import { onClickOutside } from '@vueuse/core'
 import { computed, inject, ref } from 'vue'
+import ToastComp from "@/components/ToastComp.vue"
+import { isShowToast } from "@/store/index.js"
 
 const {
   windowSizeInCssForRef,

src/components/ToastComp.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="toast">
+    <div class="txt">
+      {{ toastTxt }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toastTxt } from "@/store/index.js"
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+</script>
+
+<style lang="less" scoped>
+.toast{
+  position: fixed;
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -50%);
+  z-index: 999;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url(@/assets/images/toast-bg.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  padding-top: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  padding-bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  >.txt{
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #4A443A;
+    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    white-space: pre;
+  }
+}
+</style>

src/components/ToolList.vue

@@ -65,7 +65,7 @@
 
 <script setup>
 import { ref, watch, computed } from "vue"
-import { toolList, selectedToolNum } from "@/store/index.js"
+import { toolList, selectedToolNum, showToast } from "@/store/index.js"
 
 const {
   windowSizeInCssForRef,
@@ -86,30 +86,30 @@ function onClickToolItem(idx) {
     if (toolList.value[idx].selected === false) {
       if (requiredToolList.value.length === 1) {
         toolList.value[idx].selected = true
-        window.alert('选择正确')
+        showToast('选择正确')
       } else if (!props.currentStepInfo.hasToolOrder) {
         toolList.value[idx].selected = true
-        window.alert('选择正确')
+        showToast('选择正确')
       } else {
         const toolIdxInRequiredToolList = requiredToolList.value.indexOf(idx)
         if (toolIdxInRequiredToolList === 0) {
           toolList.value[idx].selected = true
-          window.alert('选择正确')
+          showToast('选择正确')
         } else {
           for (let i = 0; i < toolIdxInRequiredToolList; i++) {
             const preToolIdxInToolList = requiredToolList.value[i]
             if (!toolList.value[preToolIdxInToolList].selected) {
-              window.alert('您拿错工具了~请重新选择')
+              showToast('您拿错工具了~请重新选择')
               return
             }
             toolList.value[idx].selected = true
-            window.alert('选择正确')
+            showToast('选择正确')
           }
         }
       }
     }
   } else {
-    window.alert('您拿错工具了~请重新选择')
+    showToast('您拿错工具了~请重新选择')
   }
 }
 

src/store/index.js

@@ -60,6 +60,16 @@ export const selectedToolNum = computed(() => {
 
 export const workState = ref('init') // init, working, done
 
+export const toastTxt = ref('ksfsdfl')
+export const isShowToast = ref(false)
+export function showToast(txt) {
+  toastTxt.value = txt
+  isShowToast.value = true
+  setTimeout(() => {
+    isShowToast.value = false
+  }, 2000)
+}
+
 export default createStore({
   state: {
     usingChinese: true,

src/views/StartView.vue

@@ -26,6 +26,7 @@
 <script setup>
 import { watch, ref } from "vue"
 import { useClipboard } from '@vueuse/core'
+import { showToast } from "@/store/index.js"
 
 const {
   windowSizeInCssForRef,
@@ -39,7 +40,7 @@ const { text, copy, copied, isSupported } = useClipboard({
 })
 watch(copied, (vNew) => {
   if (vNew) {
-    window.alert('copied!')
+    showToast('地址已复制到剪贴板')
   }
 })