fix: input过滤 #57

Author: 马军

.vscode/settings.json

@@ -132,5 +132,9 @@
       "source.fixAll.eslint": "never",
       "source.fixAll.stylelint": "explicit"
     }
-  }
+  },
+  "i18n-ally.localesPaths": [
+    "packages/common/i18n",
+    "packages/common/i18n/src/locales"
+  ]
 }

packages/common/i18n/src/locales/en.json

@@ -4,7 +4,8 @@
     "comprehensive": "comprehensive",
     "comprehensive2": "comprehensive2",
     "customizeButtons": "customizeButtons",
-    "Selecto": "Selecto test"
+    "selecto": "Selecto test",
+    "input": "input test"
   },
   "common": {
     "code": "Code",

packages/common/i18n/src/locales/zh.json

@@ -5,7 +5,8 @@
     "comprehensive2": "综合(另外写法)",
     "customizeButtons": "自定义按键",
     "moveble": "moveble插件结合",
-    "Selecto": "Selecto测试"
+    "selecto": "Selecto测试",
+    "input": "input测试"
   },
   "common": {
     "code": "代码",

packages/docs/src/examples/input.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div class="wrapper whitewrapper" :style="rectStyle">
+      <sketch-rule ref="sketchruleRef" v-bind="post">
+        <template #default>
+          <div data-type="page" :style="canvasStyle">
+            <el-input v-model="inputValue"   type="text" />
+          </div>
+        </template>
+        <template #btn="{ reset, zoomIn, zoomOut }">
+          <div class="btns">
+            <button @click.stop="reset">还原</button>
+            <button @click.stop="zoomIn">放大</button>
+            <button @click.stop="zoomOut">缩小</button>
+          </div>
+        </template>
+      </sketch-rule>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import bgImg from '../assets/bg.png'
+import { computed, ref, reactive } from 'vue'
+import SketchRule from 'vue3-sketch-ruler'
+import 'vue3-sketch-ruler/lib/style.css'
+const sketchruleRef = ref()
+const post = reactive({
+  thick: 20,
+  width: 1470,
+  height: 700,
+  showShadowText: false,
+  canvasWidth: 1000,
+  canvasHeight: 500,
+  showRuler: true,
+  palette: { bgColor: 'transparent', lineType: 'dashed' },
+  isShowReferLine: true,
+  shadow: {
+    x: 0,
+    y: 0,
+    width: 300,
+    height: 300
+  },
+  lines: {
+    h: [0, 250],
+    v: [0, 500]
+  }
+})
+
+const rectStyle = computed(() => {
+  return {
+    width: `${post.width}px`,
+    height: `${post.height}px`
+  }
+})
+
+const inputValue = ref('')
+
+const canvasStyle = computed(() => {
+  return {
+    width: `${post.canvasWidth}px`,
+    height: `${post.canvasHeight}px`
+  }
+})
+</script>
+
+<style lang="scss">
+.wrapper {
+  margin: 0 auto;
+  background-size:
+    21px 21px,
+    21px 21px;
+  border: 1px solid #dadadc;
+}
+.whitewrapper {
+  background-color: #fafafc;
+  background-image: linear-gradient(#fafafc 20px, transparent 0),
+    linear-gradient(90deg, transparent 20px, #373739 0);
+}
+.img-style {
+  width: 100%;
+  height: 100%;
+}
+.btns {
+  position: absolute;
+  display: flex;
+  bottom: 20px;
+  right: 40px;
+  z-index: 999;
+}
+
+</style>

packages/docs/src/router/index.ts

@@ -40,17 +40,17 @@ export const menuRoutes: RouteRecordRaw[] = [
     path: 'selecto',
     component: () => import('../examples/SelectoDemo.vue'),
     meta: {
-      title: 'Selecto'
+      title: 'selecto'
     }
-  }
+  },
 
-  // {
-  //   path: 'temp',
-  //   component: () => import('@/examples/temp.vue'),
-  //   meta: {
-  //     title: 'temp'
-  //   }
-  // }
+  {
+    path: 'input',
+    component: () => import('@/examples/input.vue'),
+    meta: {
+      title: 'input'
+    }
+  }
 ]
 
 const routes: RouteRecordRaw[] = [

packages/sketch-ruler/package.json

@@ -18,8 +18,8 @@
     "url": "https://gitee.com/majun2232/vue3-sketch-Ruler"
   },
   "sideEffects": false,
-  "main_": "lib/index.js",
-  "main": "src/index.ts",
+  "main": "lib/index.js",
+  "main1": "src/index.ts",
   "style": "lib/style.css",
   "types": "lib/index.d.ts",
   "scripts": {

packages/sketch-ruler/src/sketch-ruler/index.vue

@@ -169,6 +169,18 @@ const handleWheel = (e: WheelEvent) => {
   }
 }
 const handleSpaceKeyDown = (e: KeyboardEvent) => {
+  // 检查当前焦点元素
+  const activeElement = document.activeElement
+  // fix: #57 如果焦点在monaco-editor、input、textarea或其他可编辑元素中,则不处理空格事件
+  if (
+    activeElement?.closest('.monaco-editor') ||
+    activeElement?.tagName === 'INPUT' ||
+    activeElement?.tagName === 'TEXTAREA' ||
+    activeElement?.getAttribute('contenteditable') === 'true'
+  ) {
+    return
+  }
+
   if (e.key === ' ') {
     cursorClass.value = 'grabCursor'
     panzoomInstance.value?.bind()
@@ -177,6 +189,18 @@ const handleSpaceKeyDown = (e: KeyboardEvent) => {
 }
 
 const handleSpaceKeyUp = (e: KeyboardEvent) => {
+  // 检查当前焦点元素
+  const activeElement = document.activeElement
+  // 如果焦点在monaco-editor、input、textarea或其他可编辑元素中,则不处理空格事件
+  if (
+    activeElement?.closest('.monaco-editor') ||
+    activeElement?.tagName === 'INPUT' ||
+    activeElement?.tagName === 'TEXTAREA' ||
+    activeElement?.getAttribute('contenteditable') === 'true'
+  ) {
+    return
+  }
+
   if (e.key === ' ') {
     panzoomInstance.value?.destroy()
     cursorClass.value = 'defaultCursor'