feat(代码段插件): 增加和优化一些代码段

xw5 · Dec 7, 2023 · 682d4b5 · 682d4b5
1 parent aa99a34
commit 682d4b5
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Change Log
 更新日志记录
+## [0.0.30] - 2023-12-07
+### Added
+- js代码段
+   - jsisinviewport: 判断元素是否完全在可视区内 关键字: "jsisinviewport","isinviewport","元素在可视区内","可视区内"
+   - jsisintoviewport: 判断元素是否进入可视区内 关键字: "jsisintoviewport","isintoviewport",,"元素进入可视区内","可视区内"
+   - jsintoviewportlistener: 监听元素进入or离开可视区 关键字: "jsintoviewportlistener","intoviewportlistener","元素进入可视区监听"
+   - jsquerySelector: "jsqueryselect","queryselect","jsselect","select","元素选择"
+### Changed
+    - 优化一些代码段
+
 ## [0.0.29] - 2023-12-06
 ### Added
 - js代码段

diff --git a/README.md b/README.md
@@ -103,6 +103,10 @@
 |  jsgetscrolldistance  |  获取滚动像素 关键字: "jsgetscrolldistance","getscrolldistance","获取滚动像素","滚动像素"
 |  jsscrolltotop  |  滚动到顶部 关键字: "jsscrolltotop","scrolltotop","滚动到顶部"
 |  jsconvertchineseamount  |  数字转中文大写金额 关键字: "jsconvertchineseamount","convertchineseamount","中文大写金额"
+|  jsisinviewport  |  判断元素是否完全在可视区内 关键字: "jsisinviewport","isinviewport","元素在可视区内","可视区内"
+|  jsisintoviewport  |  判断元素是否进入可视区内 关键字: "jsisintoviewport","isintoviewport",,"元素进入可视区内","可视区内"
+|  jsintoviewportlistener  |  监听元素进入or离开可视区 关键字: "jsintoviewportlistener","intoviewportlistener","元素进入可视区监听"
+|  jsquerySelector  |  "jsqueryselect","queryselect","jsselect","select","元素选择"
 |  ifplus  |  js代码下专为ifplus-loader定义的条件代码段  关键字: "ifplus","jsifplus"
 <br />
 

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "common-code-snippet",
     "displayName": "Common-Code-Snippet",
     "description": "前端开发日常使用代码片段插件",
-    "version": "0.0.29",
+    "version": "0.0.30",
     "publisher":"msxw",
     "engines": {
         "vscode": "^1.46.0"

diff --git a/snippets/javascript/snippets.code-snippets b/snippets/javascript/snippets.code-snippets
@@ -2245,7 +2245,82 @@
       "}"
     ],
     "description": "数字转中文大写金额"
-  }
+  },
+
+  "jsisinviewport": {
+    "prefix": ["jsisinviewport","isinviewport","元素在可视区内","可视区内"],
+    "body": [
+      "/**",
+      " * 判断元素是否完全在可视区内",
+      " * @param element ",
+      " * @returns ",
+      " */",
+      "function isInViewPort(element) {",
+      "  const viewWidth = window.innerWidth || document.documentElement.clientWidth;",
+      "  const viewHeight =",
+      "    window.innerHeight || document.documentElement.clientHeight;",
+      "  const { top, right, bottom, left } = element.getBoundingClientRect();",
+      "",
+      "  return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;",
+      "}"
+    ],
+    "description": "判断元素是否完全在可视区内"
+  },
+
+  "jsisintoviewport": {
+    "prefix": ["jsisintoviewport","isintoviewport",,"元素进入可视区内","可视区内"],
+    "body": [
+      "/**",
+      " * 判断元素是否进入可视区内",
+      " * @param element ",
+      " * @returns ",
+      " */",
+      "function isInToViewPort(element) {",
+      "  const viewWidth = window.innerWidth || document.documentElement.clientWidth;",
+      "  const viewHeight =",
+      "    window.innerHeight || document.documentElement.clientHeight;",
+      "  const elW = element.offsetWidth;",
+      "  const elh = element.offsetHeight;",
+      "  const { top, right, bottom, left } = element.getBoundingClientRect();",
+      "  return top > -elh && top < viewHeight && left > -elW && left < viewWidth;",
+      "}"
+    ],
+    "description": "判断元素是否进入可视区内"
+  },
+
+  "jsintoviewportlistener": {
+    "prefix": ["jsintoviewportlistener","intoviewportlistener","元素进入可视区监听"],
+    "body": [
+      "/**",
+      " * 监听元素进入or离开可视区",
+      " * @param element ",
+      " * @param cb ",
+      " */",
+      "function inToViewPortListener(element, cb) {",
+      "  const intersectionObserver = new IntersectionObserver((entries) => {",
+      "    entries.forEach((item) => {",
+      "      if (item.isIntersecting) {",
+      "        cb(true);",
+      "        console.log('进入可视区域');",
+      "      } else {",
+      "        cb(false);",
+      "        console.log('退出可视区域');",
+      "      }",
+      "    })",
+      "  });",
+      "  intersectionObserver.observe(element);",
+      "}"
+    ],
+    "description": "监听元素进入or离开可视区"
+  },
+
+  "jsquerySelector": {
+    "prefix": ["jsqueryselect","queryselect","jsselect","select","元素选择"],
+    "body": [
+      "document.${1|querySelector,querySelectorAll|}(\"${2|.class,#id,inpput[attr='test']|}\");"
+    ],
+    "description": "querySelector选择元素"
+  },
 
   "ifplus": {
     "prefix": ["ifplus","jsifplus"],