docs: 更新部分文档内容

simply-none · Oct 18, 2023 · 7d64efb · 7d64efb
1 parent 5fcc7f1
commit 7d64efb
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 10 deletions.
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -34,10 +34,7 @@ html.dark .vp-doc [class*="language-"] pre {
 }
 
 #VPSidebarNav .VPSidebarItem.is-active .text {
-  border-left: 4px solid #3451b2;
-  padding: 0;
-  padding-left: 3px;
-  margin: 4px 0;
+  font-weight: 900;
 }
 
 html:not(.dark) .vp-doc .line-numbers-wrapper {

diff --git a/docs/usage-frame/vue/Pinia.md b/docs/usage-frame/vue/Pinia.md
@@ -299,10 +299,10 @@ export default {
         age: 27
       }
       // 推荐
-      useCounterStoreF.$patch = {
+      useCounterStoreF.$patch({
         name: 'jade',
         age: 27
-      }
+      })
     }
 
     import { MutationType } from 'pinia'
@@ -458,9 +458,6 @@ pinia支持扩展的内容，不限于下面这些：
 
 语法：通过`pinia.use()`添加到pinia实例上
 
-说明：
-- 
-
 场景：
 - 添加全局对象，比如路由器、modal、toast管理器
 

diff --git a/docs/usage-frame/基础/CSS知识点.md b/docs/usage-frame/基础/CSS知识点.md
@@ -14,6 +14,64 @@
    3. time： s、ms
 3. +、-运算符两边必须有空白符，*、/运算符不必须
 
+### getComputedStyle(element)
+
+定义：获取一个经过解析计算后的所有css属性值的对象
+
+用法：
+
+```js
+// 若有以下dom结构
+// <html style="--my-color: red;">xxx</html>
+// 获取html元素的`--my-color`属性
+// document.documentElement:根元素的只读属性，如html元素
+let html = getComputedStyle(document.documentElement)
+
+// 获取普通的css属性，比如color
+let color = html.color
+let color = html['color']
+let myColor = html.getPropertyValue('color')
+
+// 获取自定义的css变量
+let myColor = html.getPropertyValue('--my-color')
+```
+
+### transform
+
+值：
+
+- **translate3d(tx, ty, tz)**：相对于元素原位置，移动特定的长度（tx、ty、tz）到一个新位置，例如`transform: translate3d(10px, 0px, 0px);`，向右移动10px
+
+### pointer-events
+
+使用场景：当一个元素a在另一个元素b上面且完全覆盖b时（比如使用z-index），若想点击b上面的事件，而不触发a的事件，这时就可以使用`pointer-events: none;`
+
+定义：`pointer-events: none;`表示该元素不是鼠标事件的目标元素，且鼠标事件可以穿透该元素，而指向被该元素覆盖下的内容。
+
+### filter
+
+定义：改变输入图像外观的图形展现效果
+
+属性值可以是下列函数过滤器：
+
+- blur()：模糊图形
+- brightness()：明暗图形
+- grayscale()：灰度图形
+- invert()：图形颜色反转
+- opacity()：图形透明
+- ......
+
+#### grayscale
+
+使用场景：灰色模式
+
+```css [灰色模式]
+body {
+   /* 参数：表示灰度，0-1之间 */
+   filter: grayscale(1);
+}
+```
+
 ## flex布局
 
 ```css

diff --git a/docs/usage-frame/基础/JavaScript知识点.md b/docs/usage-frame/基础/JavaScript知识点.md
@@ -13,4 +13,73 @@ const result = arr.reduce((previousValue, currentValue) => {
   // 这里的返回值是下一次计算的previousValue
   return xxx
 }, initialValue)
-```
+```
+
+## web api
+
+### Resize Observer api
+
+定义：该api提供了一种*高性能*的机制，通过该机制，代码可以监视元素*盒模型尺寸*的大小更改，在每次更改时都会向观察者传递通知（另一种性能损耗严重的方案是使用resize event）
+
+用法：和其他观察者类似，使用ResizeObserver()构造函数创建一个新的ResizeObserver，然后使用observe()方法使其寻找目标元素的大小更改，更改时构造函数设置的回调函数会被执行
+
+```javascript [ResizeObserver用法]
+// 第一步：创建一个resizeObserver对象
+const resizeObserver = new ResizeObserver(callback)
+// 第二步：挂载观察者对象到目标元素，可以有多个目标元素，参数（target：检测目标，options：可选对象）
+resizeObserver.observe(document.querySelector('div'))
+resizeObserver.observe(document.querySelector('p'), {
+  // 设置observer监听的盒模型
+  box: 'content-box' || 'border-box' || 'device-pixel-content-box'
+})
+
+// 取消观察者对象对所有元素的监视
+resizeObserver.disconnect()
+
+// 取消观察者对象对某个元素的监视
+resizeObserver.unobserve(document.querySelector('div'))
+
+function callback (entries) {
+  console.log(entries)
+  // 其他操作......
+}
+```
+
+### MutationObserver
+
+定义：能够监视DOM树的更改（节点的增删、节点属性的修改）
+
+用法：创建一个构造函数，参数为监听目标对象DOM树变动时执行的内容
+
+```javascript [MutationObserver用法]
+const targetNode = document.getElementById('#app')
+
+// 配置项描述了DOM的哪些变化应该报告给MutationObserver的callback，下面属性至少需要一个以上的属性为true，详情见：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/observe
+const config = {
+  // 默认为true，观察所有监听的节点属性值的变化，比如id、class、style属性等
+  attributes: true,
+  // 监听目标节点中发生的节点的新增和删除，若配置了subtree，则对整个子树生效
+  childList: true,
+  // 监听以目标元素为根节点的整个子树及其属性
+  subtree: true
+}
+const observer = new MutationObserver(callback)
+// 对某元素进行监视
+observer.observe(targetNode, config)
+
+// 停止监视
+observer.disconnect()
+
+// 参数：mutationList：出发改动的mutationRecord对象数组，ovserver为调用该函数的MutationObserver对象
+function callback (mutationList, observer) {
+  for (let mutation of mutationList) {
+    // type：表示触发dom改动的配置对象具体的属性类型
+    if (mutation.type === 'childList') {
+      // ......
+    } else if (mutation.type === 'attributes') {
+      // ......
+    }
+  }
+}
+
+```