refactor: refactor vue Api

.vscode/extensions.json

@@ -1,11 +1,11 @@
 {
   "recommendations": [
-    "octref.vetur",
+    "johnsoncodehk.volar",
+    "johnsoncodehk.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "esbenp.prettier-vscode",
     "christian-kohler.path-intellisense",
-    "mikestead.dotenv",
     "formulahendry.auto-close-tag",
     "formulahendry.auto-rename-tag"
   ]

package.json

@@ -17,7 +17,7 @@
     "build:demo": "vite build --config vite.demo.js",
     "serve": "vite preview",
     "precommit": "lint-staged",
-    "lint-fix": "eslint --fix ./src --ext .vue,.js,.ts",
+    "lint-fix": "eslint --fix  --ext .vue,.js,.ts",
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
     "format": "prettier-eslint --write src/**/*.{js,vue,css,scss,styl} && prettier-eslint --write packages/**/*.{js,vue,css,scss,styl} ",
     "css": "cross-env stylelint src/**/*.{html,vue,css,less,scss,styl} --fix && stylelint packages/**/*.{html,vue,css,less,scss,styl} ",

packages/canvasRuler/canvasRuler.vue

@@ -1,6 +1,6 @@
 <template>
   <canvas
-    ref="$canvas"
+    ref="canvas"
     class="ruler"
     @click="handleClick"
     @mouseenter="handleEnter"
@@ -12,6 +12,7 @@
 import { drawHorizontalRuler, drawVerticalRuler } from './utils'
 const getValueByOffset = (offset, start, scale) =>
   Math.round(start + offset / scale)
+import { reactive, ref, onMounted, watch } from 'vue'
 export default {
   name: 'CanvasRuler',
   props: {
@@ -25,91 +26,91 @@ export default {
     selectLength: Number
   },
   emits: ['onAddLine', 'onIndicatorShow', 'onIndicatorMove', 'onIndicatorHide'],
-  data() {
-    return {
-      $canvas: {},
+  setup(props, context) {
+    const state = reactive({
       canvasContext: {}
-    }
-  },
-  watch: {
-    start() {
-      this.drawRuler()
-    },
-    width(val) {
-      this.updateCanvasContext()
-      this.drawRuler()
-    },
-    height(val) {
-      this.updateCanvasContext()
-      this.drawRuler()
-    }
-  },
-  mounted() {
-    this.initCanvasRef()
-    this.updateCanvasContext()
-    this.drawRuler()
-  },
-  methods: {
-    initCanvasRef() {
-      this.$canvas = this.$refs.$canvas
-      this.canvasContext = this.$canvas && this.$canvas.getContext('2d')
-    },
-    updateCanvasContext() {
-      const { ratio } = this.canvasConfigs
+    })
+    const canvas = ref(null)
 
+    onMounted(() => {
+      initCanvasRef()
+      updateCanvasContext()
+      drawRuler()
+    })
+    const initCanvasRef = () => {
+      state.canvasContext = canvas.value && canvas.value.getContext('2d')
+    }
+    const updateCanvasContext = () => {
+      const { ratio } = props.canvasConfigs
       // 比例宽高
-      this.$canvas.width = this.width * ratio
-      this.$canvas.height = this.height * ratio
-
-      const ctx = this.$canvas.getContext('2d')
+      canvas.value.width = props.width * ratio
+      canvas.value.height = props.height * ratio
+      const ctx = canvas.value.getContext('2d')
       ctx.font = `${12 * ratio}px -apple-system,
                 "Helvetica Neue", ".SFNSText-Regular",
                 "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif`
       ctx.lineWidth = 1
       ctx.textBaseline = 'middle'
-    },
-    drawRuler() {
+    }
+    const drawRuler = () => {
       const options = {
-        scale: this.scale,
-        width: this.width,
-        height: this.height,
-        canvasConfigs: this.canvasConfigs
+        scale: props.scale,
+        width: props.width,
+        height: props.height,
+        canvasConfigs: props.canvasConfigs
       }
 
-      if (this.vertical) {
+      if (props.vertical) {
         drawVerticalRuler(
-          this.canvasContext,
-          this.start,
-          { y: this.selectStart, height: this.selectLength },
+          state.canvasContext,
+          props.start,
+          { y: props.selectStart, height: props.selectLength },
           options
         )
       } else {
         drawHorizontalRuler(
-          this.canvasContext,
-          this.start,
-          { x: this.selectStart, width: this.selectLength },
+          state.canvasContext,
+          props.start,
+          { x: props.selectStart, width: props.selectLength },
           options
         )
       }
-    },
-    handleClick(e) {
-      const offset = this.vertical ? e.offsetY : e.offsetX
-      const value = getValueByOffset(offset, this.start, this.scale)
-      this.$emit('onAddLine', value)
-    },
-    handleEnter(e) {
-      const offset = this.vertical ? e.offsetY : e.offsetX
-      const value = getValueByOffset(offset, this.start, this.scale)
-      this.$emit('onIndicatorShow', value)
-    },
-    handleMove(e) {
-      const offset = this.vertical ? e.offsetY : e.offsetX
-      const value = getValueByOffset(offset, this.start, this.scale)
-      this.$emit('onIndicatorMove', value)
-    },
-    handleLeave() {
-      this.$emit('onIndicatorHide')
+    }
+    watch(
+      () => props.start,
+      () => drawRuler()
+    )
+    watch([() => props.width, () => props.height], () => {
+      updateCanvasContext()
+      drawRuler()
+    })
+    const handleClick = e => {
+      const offset = props.vertical ? e.offsetY : e.offsetX
+      const value = getValueByOffset(offset, props.start, props.scale)
+      context.emit('onAddLine', value)
+    }
+    const handleEnter = e => {
+      const offset = props.vertical ? e.offsetY : e.offsetX
+      const value = getValueByOffset(offset, props.start, props.scale)
+      context.emit('onIndicatorShow', value)
+    }
+    const handleMove = e => {
+      const offset = props.vertical ? e.offsetY : e.offsetX
+      const value = getValueByOffset(offset, props.start, props.scale)
+      context.emit('onIndicatorMove', value)
+    }
+    const handleLeave = () => {
+      context.emit('onIndicatorHide')
+    }
+    return {
+      state,
+      canvas,
+      initCanvasRef,
+      handleClick,
+      handleEnter,
+      handleMove,
+      handleLeave
     }
   }
 }

packages/sketchRuler/line.vue

@@ -7,11 +7,12 @@
   >
     <div class="action" :style="actionStyle">
       <span class="del" @click="handleRemove">&times;</span>
-      <span class="value">{{ startValue }}</span>
+      <span class="value">{{ startValue.value }}</span>
     </div>
   </div>
 </template>
 <script>
+import { reactive, ref, computed, onMounted, watch } from 'vue'
 export default {
   name: 'LineRuler',
   props: {
@@ -25,76 +26,77 @@ export default {
     thick: Number
   },
   emits: ['onMouseDown', 'onRelease', 'onRemove'],
-  data() {
-    return {
-      startValue: 0,
-      showLine: true
+  setup(props, context) {
+    const startValue = ref(0)
+    const showLine = ref(true)
+    onMounted(() => {
+      startValue.value = props.value
+    })
+    const setShowLine = offset => {
+      showLine.value = offset >= 0
     }
-  },
-  computed: {
-    offset() {
-      const offset = (this.startValue - this.start) * this.scale
-      this.setShowLine(offset)
+    const offset = computed(() => {
+      const offset = (startValue.value - props.start) * props.scale
+      setShowLine(offset)
       const positionValue = offset + 'px'
-      const position = this.vertical
+      const position = props.vertical
         ? { top: positionValue }
         : { left: positionValue }
       return position
-    },
-    borderCursor() {
-      const borderValue = `1px solid ${this.palette.lineColor}`
-      const border = this.vertical
+    })
+    const borderCursor = computed(() => {
+      const borderValue = `1px solid ${props.palette.lineColor}`
+      const border = props.vertical
         ? { borderTop: borderValue }
         : { borderLeft: borderValue }
 
-      const cursorValue = this.isShowReferLine
-        ? this.vertical
+      const cursorValue = props.isShowReferLine
+        ? props.vertical
           ? 'ns-resize'
           : 'ew-resize'
         : 'none'
       return {
         cursor: cursorValue,
         ...border
       }
-    },
-    actionStyle() {
-      const actionStyle = this.vertical
-        ? { left: this.thick + 'px' }
-        : { top: this.thick + 'px' }
+    })
+    const actionStyle = computed(() => {
+      const actionStyle = props.vertical
+        ? { left: props.thick + 'px' }
+        : { top: props.thick + 'px' }
       return actionStyle
-    }
-  },
-  mounted() {
-    this.initStartValue()
-  },
-  methods: {
-    setShowLine(offset) {
-      this.showLine = offset >= 0
-    },
-    handleDown(e) {
-      const startD = this.vertical ? e.clientY : e.clientX
-      const initValue = this.startValue
-      this.$emit('onMouseDown')
+    })
+
+    const handleDown = e => {
+      const startD = props.vertical ? e.clientY : e.clientX
+      const initValue = startValue.value
+      context.$emit('onMouseDown')
       const onMove = e => {
-        const currentD = this.vertical ? e.clientY : e.clientX
+        const currentD = props.vertical ? e.clientY : e.clientX
         const newValue = Math.round(
-          initValue + (currentD - startD) / this.scale
+          initValue + (currentD - startD) / props.scale
         )
-        this.startValue = newValue
+        startValue.value = newValue
       }
       const onEnd = () => {
-        this.$emit('onRelease', this.startValue, this.index)
+        context.$emit('onRelease', startValue.value, props.index)
         document.removeEventListener('mousemove', onMove)
         document.removeEventListener('mouseup', onEnd)
       }
       document.addEventListener('mousemove', onMove)
       document.addEventListener('mouseup', onEnd)
-    },
-    handleRemove() {
-      this.$emit('onRemove', this.index)
-    },
-    initStartValue() {
-      this.startValue = this.value
+    }
+    const handleRemove = () => {
+      context.$emit('onRemove', props.index)
+    }
+    return {
+      startValue,
+      showLine,
+      offset,
+      borderCursor,
+      actionStyle,
+      handleDown,
+      handleRemove
     }
   }
 }