兼容性处理：VueUse的分享功能在微信中不支持、100vh在移动端浏览器效果有问题。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode dev",
@@ -11,13 +11,14 @@
   "dependencies": {
     "@vueuse/core": "^10.4.1",
     "axios": "^1.1.3",
+    "clipboard": "^2.0.11",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.7",
     "mitt": "^3.0.0",
     "v-viewer": "^3.0.11",
     "viewerjs": "^1.11.6",
-    "vue-router": "^4.0.3",
     "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

src/useFunctions/useSizeAdapt.js

@@ -10,7 +10,7 @@ export default function useSizeAdapt(windowWidthWhenDesign = 375, windowHeightWh
   function compute() {
     if (window.innerWidth / window.innerHeight > windowWidthWhenDesign / windowHeightWhenDesign) {
       windowSizeWhenDesignForRef.value = windowHeightWhenDesign
-      windowSizeInCssForRef.value = '100vh'
+      windowSizeInCssForRef.value = window.innerHeight + 'px'
     } else {
       windowSizeWhenDesignForRef.value = windowWidthWhenDesign
       windowSizeInCssForRef.value = '100vw'

src/views/DrawView.vue

@@ -53,15 +53,22 @@
         <button @click="onClickReplay">
           重新体验
         </button>
-        <button>分享</button>
+        <button
+          id="copy-text"
+          :data-clipboard-text="shareUrl"
+          data-clipboard-action="copy"
+          @click="onClickCopy"
+        >
+          分享
+        </button>
       </div>
     </Transition>
   </div>
 </template>
 
 <script setup>
+import Clipboard from "clipboard"
 import { toolList, selectedToolNum, workState } from "@/store/index.js"
-// import { onClickOutside } from '@vueuse/core'
 import { computed, inject, ref, nextTick } from 'vue'
 import ProgressComp from "@/components/ProgressComp.vue"
 import ToolList from "@/components/ToolList.vue"
@@ -71,6 +78,7 @@ import StepView3 from "@/views/StepView3.vue"
 import StepView4 from "@/views/StepView4.vue"
 import StepView5 from "@/views/StepView5.vue"
 import StepView6 from "@/views/StepView6.vue"
+import { showToast } from "@/store/index.js"
 
 const {
   windowSizeInCssForRef,
@@ -101,6 +109,15 @@ function onClickReplay() {
     item.selected = false
   })
 }
+
+const shareUrl = location.origin + location.pathname
+function onClickCopy() {
+  let clipboard = new Clipboard("#copy-text")
+  clipboard.on("success", function() {
+    showToast('地址已复制到剪贴板')
+  })
+}
+
 </script>
 
 <style lang="less" scoped>

src/views/StartView.vue

@@ -16,7 +16,12 @@
       <button @click="$router.push({name: 'DrawView'})">
         体验版画过程
       </button>
-      <button @click="copy('sldkfksfklslkdf')">
+      <button
+        id="copy-text"
+        :data-clipboard-text="shareUrl"
+        data-clipboard-action="copy"
+        @click="onClickCopy"
+      >
         分享
       </button>
     </div>
@@ -24,8 +29,8 @@
 </template>
 
 <script setup>
+import Clipboard from "clipboard"
 import { watch, ref } from "vue"
-import { useClipboard } from '@vueuse/core'
 import { showToast } from "@/store/index.js"
 
 const {
@@ -33,17 +38,13 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const source = ref('Hello')
-const { text, copy, copied, isSupported } = useClipboard({
-  source,
-  legacy: true,
-})
-watch(copied, (vNew) => {
-  if (vNew) {
+const shareUrl = location.origin + location.pathname
+function onClickCopy() {
+  let clipboard = new Clipboard("#copy-text")
+  clipboard.on("success", function() {
     showToast('地址已复制到剪贴板')
-  }
-})
-
+  })
+}
 </script>
 
 <style lang="less" scoped>

yarn.lock

@@ -2381,6 +2381,15 @@ cli-spinners@^2.5.0:
   resolved "https://registry.npmmirror.com/cli-spinners/-/cli-spinners-2.9.1.tgz#9c0b9dad69a6d47cbb4333c14319b060ed395a35"
   integrity sha512-jHgecW0pxkonBJdrKsqxgRX9AcG+u/5k0Q7WPDfi8AogLAdwxEkyYYNWwZ5GvVFoFx2uiY1eNcSK00fh+1+FyQ==
 
+clipboard@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
+  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 clipboardy@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmmirror.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
@@ -2813,6 +2822,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -3558,6 +3572,13 @@ globby@^11.0.2, globby@^11.0.3:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
+  dependencies:
+    delegate "^3.1.2"
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -5466,6 +5487,11 @@ select-hose@^2.0.0:
   resolved "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
+
 selfsigned@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/selfsigned/-/selfsigned-2.1.1.tgz#18a7613d714c0cd3385c48af0075abf3f266af61"
@@ -5929,6 +5955,11 @@ thunky@^1.0.2:
   resolved "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"