Tue Nov 21 12:03:00 CST 2023 inscode

.inscode

 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"

package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-esign": "^1.1.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+<script>
+import vueEsign from 'vue-esign'
+export default {
+  components: {vueEsign},
+  data() {
+    return {
+      imgUrl: ''
+    }
+  },
+  methods: {
+    confirm() {
+      this.$refs.esign.generate().then(res => {
+        this.imgUrl = res
+        console.log(res)
+      }).catch(() => {
+        alert('请签名！')
+      })
+    }
+  }
+}
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <div>
+    <button @click="confirm">确认</button>
+    <button style="margin-left: 10px;">清除</button>
+    <vueEsign ref="esign" style="border: 1px solid blue;" width="500" height="200" />
+    <img v-if="imgUrl" :src="imgUrl" width="500" height="200" alt="">
+  </div>
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
+button{
+  width: 52px;
+  height: 23px;
 }
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
 @media (min-width: 1024px) {
   header {
     display: flex;