dsw0000/dsw_ruler
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改组件id冲突bug

Browse Source
This commit is contained in:
ivo 2022-05-22 14:22:14 +08:00
parent 2b2198794d
commit bc97e8a305
3 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "dsw-ruler", "name": "dsw-ruler",
"version": "0.1.0", "version": "0.1.3",
"main": "dist/dsw-ruler.umd.min.js", "main": "dist/dsw-ruler.umd.min.js",
"private": false, "private": false,
"jsx": "preserve", "jsx": "preserve",

2
src/App.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div id="app"> <div id="app">
<DswRuler class="horizontal" :minNum="-107" :maxNum="num" @move="callback" @click="callback"></DswRuler> <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"> <div class="btn">
<button @click="sub">-</button> <button @click="sub">-</button>
<button @click="add">+</button> <button @click="add">+</button>

11
src/components/dsw-ruler/index.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div> <div>
<canvas <canvas
id="ruler"
ref="ruler" ref="ruler"
:style="{'width': '100%', 'height': '100%', 'position': 'relative'}" :style="{'width': '100%', 'height': '100%', 'position': 'relative'}"
></canvas> ></canvas>
@ -51,14 +50,14 @@ export default {
} }
}, },
mounted() { mounted() {
let canvas = document.getElementById('ruler'); let canvas = this.$refs.ruler;
canvas.addEventListener('mousemove', this.dottedLineMove, true) canvas.addEventListener('mousemove', this.dottedLineMove, true)
canvas.addEventListener('click', this.dottedLineClick, true) canvas.addEventListener('click', this.dottedLineClick, true)
this.init(); this.init();
}, },
methods: { methods: {
init() { init() {
let canvas = document.getElementById('ruler'); let canvas = this.$refs.ruler;
if (this.orientation) { if (this.orientation) {
this.windowWidth = canvas.getBoundingClientRect().height; this.windowWidth = canvas.getBoundingClientRect().height;
@ -77,14 +76,14 @@ export default {
}, },
clearGrid() { clearGrid() {
let canvas = document.getElementById('ruler'); let canvas = this.$refs.ruler;
let w = canvas.getBoundingClientRect().width; let w = canvas.getBoundingClientRect().width;
let h = canvas.getBoundingClientRect().height; let h = canvas.getBoundingClientRect().height;
let ctx = canvas.getContext("2d"); let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, w, h); ctx.clearRect(0, 0, w, h);
}, },
drawGrid() { drawGrid() {
let canvas = document.getElementById('ruler'); let canvas = this.$refs.ruler;
if (!canvas.getContext) return; if (!canvas.getContext) return;
// 方向判定 // 方向判定
@ -184,7 +183,7 @@ export default {
this.$emit('click', position) this.$emit('click', position)
}, },
resize() { resize() {
let canvas = document.getElementById('ruler'); let canvas = this.$refs.ruler;
if (this.orientation) { if (this.orientation) {
this.windowWidth = canvas.getBoundingClientRect().height; this.windowWidth = canvas.getBoundingClientRect().height;