From 682d4b5ec9f6d606409d42a33473e0c2e04ca0a2 Mon Sep 17 00:00:00 2001 From: xiewu Date: Thu, 7 Dec 2023 21:40:15 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=A3=E7=A0=81=E6=AE=B5=E6=8F=92?= =?UTF-8?q?=E4=BB=B6):=20=E5=A2=9E=E5=8A=A0=E5=92=8C=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=B8=80=E4=BA=9B=E4=BB=A3=E7=A0=81=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 10 +++ README.md | 4 ++ package.json | 2 +- snippets/javascript/snippets.code-snippets | 77 +++++++++++++++++++++- 4 files changed, 91 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9233e12..60af04f 100644 --- 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 index 512f03d..cb1919c 100644 --- 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"
diff --git a/package.json b/package.json index a8203eb..69db586 100644 --- 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 index b363e0d..acbfe65 100644 --- 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"],