From bc97e8a3058da4e844c7ccbe2d266424ecb3fbf5 Mon Sep 17 00:00:00 2001
From: ivo <ivo_d@icloud.com>
Date: Sun, 22 May 2022 14:22:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6id=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |  2 +-
 src/App.vue                        |  2 +-
 src/components/dsw-ruler/index.vue | 11 +++++------
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index ae4c123..e957834 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dsw-ruler",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "main": "dist/dsw-ruler.umd.min.js",
   "private": false,
   "jsx": "preserve",
diff --git a/src/App.vue b/src/App.vue
index 2dd184f..1544d2b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <DswRuler class="horizontal" :minNum="-107" :maxNum="num" @move="callback" @click="callback"></DswRuler>
-    <!-- <DswRuler class="vertical" :orientation="1" :minNum="-107" :maxNum="150"></DswRuler> -->
+    <DswRuler class="vertical" :orientation="1" :minNum="-107" :maxNum="150"></DswRuler>
     <div class="btn">
       <button @click="sub">-</button>
       <button @click="add">+</button>
diff --git a/src/components/dsw-ruler/index.vue b/src/components/dsw-ruler/index.vue
index 683e0e9..9d2d2c7 100644
--- a/src/components/dsw-ruler/index.vue
+++ b/src/components/dsw-ruler/index.vue
@@ -1,7 +1,6 @@
 <template>
 <div>
   <canvas
-    id="ruler"
     ref="ruler"
     :style="{'width': '100%', 'height': '100%', 'position': 'relative'}"
     ></canvas>
@@ -51,14 +50,14 @@ export default {
     }
   },
   mounted() {
-    let canvas = document.getElementById('ruler');
+    let canvas = this.$refs.ruler;
     canvas.addEventListener('mousemove', this.dottedLineMove, true)
     canvas.addEventListener('click', this.dottedLineClick, true)
     this.init();
   },
   methods: {
     init() {
-      let canvas = document.getElementById('ruler');
+      let canvas = this.$refs.ruler;
 
       if (this.orientation) {
         this.windowWidth = canvas.getBoundingClientRect().height;
@@ -77,14 +76,14 @@ export default {
 
     },
     clearGrid() {
-      let canvas = document.getElementById('ruler');
+      let canvas = this.$refs.ruler;
       let w = canvas.getBoundingClientRect().width;
       let h = canvas.getBoundingClientRect().height;
       let ctx = canvas.getContext("2d");
       ctx.clearRect(0, 0, w, h);
     },
     drawGrid() {
-      let canvas = document.getElementById('ruler');
+      let canvas = this.$refs.ruler;
       if (!canvas.getContext) return;
 
       // 方向判定
@@ -184,7 +183,7 @@ export default {
       this.$emit('click', position)
     },
     resize() {
-      let canvas = document.getElementById('ruler');
+      let canvas = this.$refs.ruler;
 
       if (this.orientation) {
         this.windowWidth = canvas.getBoundingClientRect().height;