开发日志

1. 【uniapp】hbuilder 在从 dcloud 上引入插件时会报不能写入的问题，这是没有权限导致的。需要添加管理员权限。但由于插件导入时，默认会重新开启 hbuilderx，所以会导致之前赋予的权限无效。这时应选择默认开启管理员权限。

2. 【Linux】MobaXterm 比 secureCrt 好用。界面更美观，操作更友好。它既免费，不需要填写 license，而且像 .git 等隐藏文件也能够在目录当中显示，以及它自带编辑器。拒绝 secureCrt 是一种美德。

3. 【uniapp】设计稿宽度为 750 px 时，这里的 1 px 就是 1 rpx。

4. 【JavaScript】ajax 请求成功后的 success 方法中的 this 不是全局对象 this，所以需要提前 var _self = this。

5. 【Vue】动态设置 background-image：:style="{backgroundImage: 'url('+item.imgurl+')'}"

6. 【Vue】动态绑定样式

   ① 使用 class 样式

   <!-- 数组 -->
   <div :class="['class1', 'class2']">content</div>
   <!-- 数组中使用三元表达式 -->
   <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
   <div :class="['class1', 'class2', flagData ? 'class3':'']">content</div>
   <!-- 数组中嵌套对象 -->
   <div :class="['class1','class2',{'class3': false || flagData}]">content</div>
   <!-- 对象 -->
   <div :class="{'class1': false || flagData, 'class2': true}">content</div>

   ② 使用内联样式

   <div :style="{padding: '50px'}"></div>
   <div :style="{color: flagData ? '#bfa' : ''}"></div>

7. 【git】将本地代码 push 到远程仓库出错原因分析
   将本地 ssh 放到远程仓库后，报① error: src refspec xxx does not match any：本地仓库名 master 和远程仓库名 develop 不一致，进行重命名：git branch -m master develop。②重命名后，再 push 报 Updates were rejected because the tip of your current branch is behind its remote couterpart：远程仓库上的修改没有同步到本地仓库中，需要 pull：git pull origin develop。③pull 后，报 fatal: refusing to merge unrelated histories：两个分支是不同的版本，具有不同的提交历史。可以强制合并：git pull origin develop –allow-unrelated-histories

8. 【Vue】在 template 使用 import 导入的 js 方法，在 methods 里定义一个函数，返回该 js 方法。然后在 template 中 {{}}` 使用该函数。在 `main.js` 全局导入方法，可以在 template 中使用，不用加 this。 9. 【uniapp】Hbuilder 真机调试的坑： ①开屏广告定时器没有停止：不存在 window 属性，所以 `windows.clearInterval(timeout)` 不能执行，直接改成 `clearInterval(timeout)` 就好。 ②Invalid prop: type check failed for prop coverList. Expected Array, got Object：我傻了，父组件中要传值给子组件的 coverList，于是我在父组件的 data 中添加了同名的 coverList 准备传过去，但写法却是

   coverList = {
   	type: Array, 
       default() {
           return []
       }
   }

   这只有在 props 中才能正确识别，否则会因为由`{}`包裹，被当成对象。直接改成`coverList: []`解决。 ③不能获取数据：真机调试时不能请求到数据，报 Expected URL scheme 'http' or 'https' but was 'file'。开始是想到域名配置的问题，因为请求的完整 url 类似为 http://app.neiyiyun.net/pages/home/index，如果系统把它当作 file，可能是收到的 url 为/pages/home/index（看着比较像文件路径）。可能是 h5 的 devserver 代理没有生效，当我把那段配置删掉时，还是报一样的错。后来就死马当做活马医，直接在请求的 url 上手动加上 http://app.neiyiyun.net，结果就可以访问了。app 端好像就不存在跨域问题。汗 ④开屏广告页广告图片不显示：打开 webview 调试发现图片所在块的高度为 0，查资料发现高度百分比在 app 端中无效。如果想要百分比生效，那么首先其父元素必须要有一个确定的高度。于是我给父元素的高度也设置为 100%，但还是没有效果。我突然想到，父元素也是有父元素的，它的父元素可能也是没有确定高度的。上网查资料发现 uniapp 支持 vh，所以我把父元素高度设为 100vh，百分比终于能够生效。 ⑤navigationBarBackgroundColor 颜色不生效：app 端颜色值不支持缩写，#ffffff 不能缩写成#fff。 10. 【uniapp】路由不能跳转：底部栏中的路由跳转失败，是因为没有将 open-type 设为 switchTab；其它路由失败是因为没有在 pages.json 中写入该路由。 11. 【CSS】样式穿透调整 v-html 传进来的图片大小：

   .p-paperpage__main {
       width: 100vw;
       padding: 30rpx 24rpx 0;
       box-sizing: border-box;
   }
   .p-paperpage__content {
       margin-bottom: 56rpx;
       /deep/ img {
           width: 100%;
       }
       /deep/ p {
           margin-bottom: 58rpx;
       }
   }
   
   <!-- /deep/不能用时，可以尝试换成::v-deep -->
   <style lang="scss" scoped>
     ::v-deep .ant-table-body {
       th, td {
         text-align: center;
       }
     }
   </style>

   12. 【CSS】怎么修改 slot 内图片的样式？ 13. 【Vue】app.vue 全局引入图标字体？ 14. 【Node】sass-loader 报 `this.getOption is undefined` 版本不兼容。

   "sass-loader": "^8.0.2",
   "node-sass": "^4.14.1",

   15. 【eslint】在设置中要将 tab 制表符转为空格符，不然不符合规范。 16. 【eslint】全局变量报错：`xxx is not defined`：找到 `.eslintrc.js`，添加

   "globals": {
     "你的全局变量": true
   },

   如果 globals 已经存在在里边，加入你要忽略检测的全局变量即可。 其它一些能够忽略检查的注释语句：

   // eslint-disable-next-line 
   /* eslint-disable */    /* eslint-enable */
   /* eslint-disable */  //放在文件顶部，禁止eslint检查

   17. 【eslint】自动修复对.vue 文件的 style 无效， 18. 【CSS】image 和 text 放在一起，怎么垂直居中对齐？

   <div>
       <img />
       <span>text</sapn>
   </div>
   
   <style>
       div {height: 100px; line-height: 100px;}
       img {vertical-align: middle;}
       span {vertical-align: middle;}
   </style>

   26. 【CSS】问答页面的 fixed 定位在 pc 端和移动端效果不同：`top:0` 在 pc 是视口为最顶部，在移动为导航栏下方。把 `top:0` 删掉，加上 `border-top:1px solid #fff` 解决。但是如果删去 border-top，会下移。如果把 list 的 `margin-top:88rpx` 改成 padding-top，成功。要抽时间仔细研究原理，涉及到不止一个知识点。 27. 【uniapp】button 在 flex 布局中效果有问题。把 button 包裹在 view 中解决。 28. 【uniapp】动态修改原生导航栏按钮文字：https://ask.dcloud.net.cn/article/35374 以及 h5 端 29. 【Vue】v-model 使用：https://blog.csdn.net/xidongdong1/article/details/79539243 30. 【小程序】checkbox value 属性为 string，传入 bool 值报错。以及修改 checkbox 样式。在 app.vue 中，使用的时候 style 不能加 scoped 31. 【Vue】slot 的 name 设为 checkbox 时，不能往里传入值。待探究 32. 【Vue】v-show 不能绑定在插槽的 template 上。 33. 【Vue】ref 值为动态时，可以通过 this.$refs[ref]来获取。注意子组件data值要在`this.$refs[ref][0].data`才能获取到。 34. 【Vue】子组件可以使用 watch 来监听 props 值变化。 36. 【Vue】articleList.vue：watch 用&&而非 if 报：Vue Error－报错信息：Syntax Error: Assigning to rvalue. 37. 【Vue】子组件通过 emit 向父组件传值：父组件监听的方法不要加 () 38. 【Vue】在 js 中修改 checkbox 的 checked 会报 Vue:Avoid mutating a prop directly since the value will be overwritten。所以不能直接修改。但可以在 template 中，:checked=xxx，通过改变 xxx 的值来改变 checked 的值。 39. 【uniapp】Hbuilder 真机调试时提示“缺少平台 app-plus 插件”：npm install @dcloudio/uni-app-plus --save 40. 【JavaScript】indexOf() 妙用：结合 splice(indexOf, 1) 删除一个元素 41. 【CSS】iphone5 绝对定位偏移问题：https://www.jianshu.com/p/e7360e8de461 42. 【uniapp】uni.navigateTo 跳转到非 tabbar 页面，uni.switchTab 跳转到 tabbar 页面 42. 【uniapp】iconfont 的 unicode 引入方式有差异：`` `\ue63f` 46. 【uniapp】image 的 mode 坑 https://uniapp.dcloud.io/component/image?id=image 47. 【CSS】border-radius: (左上，右上，右下，左下) 48. 【CSS】left 和 right 也要加，不然会没有宽度

   .p-profile__change__avatar {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
   }

   49. 【CSS】绘制三角形： https://www.cnblogs.com/chengxs/p/11406278.html总忘 https://www.jianshu.com/p/9a463d50e441 50. 【CSS】文本下半部分显示背景色（貌似不可实现）：https://bbs.csdn.net/topics/391824450 51. 【CSS】margin-top 为负值可让元素上移 52. 【git】拉取某一分支的代码：git clone -b<分支名>仓库地址 53. 【CSS】`~@` rather than `@`

   .c-test__img1 {
       background-image: url("~@IMAGE/companyTest/bg_work11.png"); 
   }

   54. 【小程序】`project.config.json` 中配置 `"miniprogramRoot": "./dist/dev/mp-weixin"`，即 `app.json` 所在的目录 55. 【Linux】xshell 发布：登录跳板机，切换到 192.168.3.111 机器，切换到 root 权限（sudo -i），发布 H5 页面：`sh /data/code/linkkap/linkkap-diagnosis-h5/shell/build.sh` 56. 【JavaScript】当滑动到某一位置才显示元素：懒加载判断：`getBoundingClientRect()` https://blog.csdn.net/sjn0503/article/details/76522227?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-10.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-10.control https://blog.csdn.net/qq_41806475/article/details/86350030 58. 【Vue】组件延迟加载 (v-if) 59. 【CSS】背景图片按钮发生闪烁：https://www.cnblogs.com/yinzhengjie/p/8605906.html 60. 【JavaScript】setInterval 的函数参数中的 this 指向不是全局变量 61. 【小程序】页面`onShareAppMessage() {}`定义分享 62. 【JavaScript】axios 使用 token 发送请求，避免了 csrf 攻击。而且双重 token 验证 63. 【Vue】checked 属性大坑：只要给输入元素添加 checked 属性，无论其值是 true 还是 false，都会是选中状态。disabled 同理 64. 【JavaScript】对 test1 的修改会影响到 test0：对象和数组都保存在堆中。

   let test = ['aaa', 'bbb', 'ccc']
   let test1 = test
   test1.pop()
   console.info(test) // ["aaa", "bbb"]

   65. 【Vue】在 data 中调用另一个 data 需要添加 this 会出错（待查明原因），不添加则指向 export default 外创建的变量。一般要依赖另外一个 data 的情况，都是放到计算属性里。 62. 【JavaScript】数字转为字符 `Number.toString()`、`String(Number)` 68. 【Vue】禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动：@touchmove.prevent) https://blog.csdn.net/weixin_43106777/article/details/90268333 另外一种方法是给页面的高度定死，待实践 69. 【Vue】input 保持焦点 focus：https://www.cnblogs.com/wangdashi/p/9660747.html 70. 【Vue】获取 input 输入值：https://www.cnblogs.com/zbl3033/p/13394855.html 71. 【ApiCloud】添加新页面后要重新运行 72. 【JavaScript】async 与 await 配对问题（forEach)https://blog.csdn.net/april_4/article/details/85336366 73. 【Vue】@scroll 无法监听：https://segmentfault.com/q/1010000009119633 74. 【Vue】如果图片地址是本地路径，怎么对 img 的 src 动态赋值 https://www.jianshu.com/p/6ee27c825025 `` ` ` 75. 【JavaScript】深拷贝在项目中的应用：打印输出，确定精确值 76. 【Vue】动态组件和 v-if 效果比对。uniapp 不能使用动态组件。 77. 【浏览器】Provisional headers are shown. 这个问题字面意思是“显示了临时报文头”，浏览器第一次发送这个请求，请求被阻塞，未收到响应。当要求浏览器再次发送这个请求时，上个同样的请求都还没有收到响应，浏览器就会报这个警告。简而言之，就是**请求并没有发出去**。谷歌不行，用其它浏览器打开就 ok。 78. 【JavaScript】keys 默认按编写顺序遍历对象属性。

   shareSetting = {
       weixinSecret: '',
       Appid: '',
       Desc: '',
       channelId: 0
   }
   console.info(Object.keys(shareSetting)) // ["weixinSecret", "Appid", "Desc", "channelId"]

   给对象添加新属性，新属性默认在最底部。

   shareSetting.nothing = ''
   shareSetting['apple'] = ''
   console.info(Object.keys(shareSetting))  // ["weixinSecret", "Appid", "Desc", "channelId", "nothing", "apple"]

   79. 【Vue】$options：vue 中 export default 的是一个大的选项，通过 $options 可以拿到其中的选项值。

   <template>
   	<div>...</div>
   </template>
   
   <script>
   	export default {
           data() {
               return {
                   chat: ''
               }
           }
       }
   </script>

   78. 【Vue】vuex 中如果使用 module，则取其中的 state，应为 `this.state..xxx` 79. 【Vue】动态添加路由：[Vue 利用 addRoutes 动态创建路由，并在页面刷新后保留动态路由的完整 Demo - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/227833652) 80. 【Vue】addRoutes 导致路由重复创建：[vue-router动态添加路由的方法，addRouter添加路由，提示：Duplicate named routes definition-Bug收集 - Bug搜集 (bugshouji.com)](http://www.bugshouji.com/mybug3/t860) 81. 【Vue】[解决 NavigationDuplicated: Avoided redundant navigation to current location: “/“_卡尔特斯-CSDN博客](https://blog.csdn.net/zz00008888/article/details/119566375) 82. 【CSS】隐藏 scroll 出现的滚动条

   ::-webkit-scrollbar{
       display:none;
   }

   83. 【uniapp】不支持动态组件 [uniapp暂不支持动态组件，那么有什么替代方案？ - DCloud问答](https://ask.dcloud.net.cn/question/59079) 84. 【uniapp】子组件修改父组件传来的 props 数组中的对象中的数组，页面未同步更新。需要 .sync 修饰符 另外关于一些深度监听的点：[Vue组件深度(deep)监听props对象属性无效的解决办法_随风丶逆风的博客-CSDN博客](https://blog.csdn.net/sinat_36521655/article/details/103811630) 85. 【CSS】css 选中不包括最后一个的所有同类元素

   .sameclass:not(:last-child) {
       ...
   }

   86. 【CSS】子元素占满父元素剩余高度：flex 布局（ flex-grow） 87. 【Vue】组件无法监听scroll事件：[vue 无法监听scroll事件 - SegmentFault 思否](https://segmentfault.com/q/1010000009119633) 88. 【uniapp】无法对 view 和 text 等内置组件使用 ref，自定义组件可以。[uni-app 项目中发现$refs用不了 - DCloud问答](https://ask.dcloud.net.cn/question/64975) 89. 【eslint】eslint wx is not defined：在 eslintrc.js 的 global 变量中添加 wx。 ['wx' is not defined no-undef_有梦想的程序猿的博客-CSDN博客](https://blog.csdn.net/weixin_38694789/article/details/104548252) 90. 【uniapp】swiper 根据内容高度自适应 [uniapp中如何设置swiper的高度自适应的问题解决 - 简书 (jianshu.com)](https://www.jianshu.com/p/6a2fa0f1f86e) 91. 【JavaScript】获取高度有误：数据未加载完全，可以通过async await 等调用数据的方法完成后再获取高度。再配合 nextTick()。 92. 【uniapp】滑动到底部事件 onReachBottom 不生效 [onReachBottom不起效【已解决】_小飞飞¹²³的博客-CSDN博客](https://blog.csdn.net/qq_44977477/article/details/104924766?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2.no_search_link) 93. 【JavaScript】判断字符串是不是纯数字：`isNaN(str)` 当结果是false时，表示是str是数字，为true时，表示str不是数字。（注意，当str是null或""时，值是false） 94. 【CSS】过渡变化的样式：z-index 也可以作为 transition 的属性

   <view
         class="section_4"
         :class="[showFlag ? 'showup' : 'showdown']"
   </view>
   <style>
       .section_4 {
           position: fixed;
           z-index: 9;
           bottom: 0;
           left: 0;
           width: 100vw;
           transition: 0.8s background-color;
           background-color: rgba(0, 0, 0, 0);
           &.showdown {
               transition: 0.8s ease-out;
               z-index: -1;
           }
           &.showup {
               background-color: rgba(0, 0, 0, 0.6);
           }
       }
   </style>

   点击筛选按钮，跳出筛选菜单。筛选菜单是一个组件，由遮罩块（灰色，100vw）和主要块（白色）组成。跳出时需要有一个过渡动画，页面的背景色渐变成遮罩块的颜色，同时主要块从右侧弹出。 95. 【CSS】单行文本省略

   width: 80%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

   多行文本省略

   overflow : hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   word-break: break-word;

   96. 【CSS】网页打印分页：page-break-after 不能作用在设置了 flex 或定位的元素上。 97. 【CSS】fixed 定位默认是相对浏览器窗口定位的，而不是相对父级元素定位。 98. 【Vue】不能使用对象作为 v-for 中的 key 值。因为 key 只接受数字或字符串的格式，将对象传进去，其 key 值会变成 `'[object Object]'`。 99. 【Vue】data 中的某个值如果发生改变，就算它没有被视图层引用到，它依然会触发页面的重新渲染（进入 updated 阶段）。定义在 data 中的变量，都会存在 `__ob__: Observer` 这个属性。这是 Vue 对数据设置的监控器，一般都是不可枚举的。如果想去掉可以用赋值的方式，例如 `const newData = Object.assign({}, this.data)`。 触发重新渲染时，diff 算法根据节点对比，可能不会进行什么实际更新，所以消耗不大。如果将 data 值赋予其原本的值（基本类型），那么不会触发页面的重新渲染。因此，如果需要使用一个没有出现在视图层的全局变量，那么不要将其定义在 data 中，而是将其定义在 `export default {}` 外。 100. 【浏览器】chrome 无法从该网站添加应用、扩展程序和用户脚本：[chrome 无法从该网站添加应用、扩展程序和用户脚本（绝对有效） - 简书 (jianshu.com)](https://www.jianshu.com/p/a1248c522899) 101. 【Vue】mixin 使用经验：① 重名情况：data 发生重名时以组件数据优先。组件中的生命钩子函数和混入中的生命钩子函数发生重名时，都会执行，但组件中的钩子函数优先执行。（钩子同步-组件同步-钩子异步-组件异步）② 组件内 template 中无法使用混入中的变量。③ 当要在某一组件中单独对混入的方法进行修改时，善用回调函数。 102. 【Node】node egg | 部署报错：`[app_worker] server got error: bind EADDRINUSE 0.0.0.0:7002, code: EADDRINUSE` 端口被其他应用程序占用了，只要找到占用该端口的应用程序，杀死它就好了。

   netstat -o -n -a | findstr :7002
   taskkill /F /PID 27196

    103. 【CSS】::before 设置小长方形前缀

   &__title {
       color: #257EFE;
       font-size: 0.28rem;
       font-weight: bold;
       &::before {
           content: '';
           display: inline-block;
           width: .6rem;
           height: .04rem;
           border-radius: 0.02rem;
           background: #257EFE;
           position: relative;
           bottom: -0.2rem;
           left: 0.6rem;
       }
   }

   104. 【JavaScript, Vue】需求：在页面刷新前保存本地数据防止丢失。 做法一（不推荐）：每当数据更改时，就触发 `localStorage.setItem` 方法。由于要频繁地触发 `localStorage.setItem` 方法，所以对性能很不友好。 做法二（推荐）：监听页面的刷新事件 `beforeunload`，在监听方法中保存数据。

   mounted() {
   	window.addEventListener("beforeunload",()=>{
   		sessionStorage.setItem("data", this.data)
   	})
   },

   注意，当 Vue 页面刷新时，不会进入 `beforeDestroy` 和 `destroyed` 阶段。 105. 【Vue】监听对象属性变化

   watch: {
       'cityName.name': {
         handler(newName, oldName) {
         // ...
         },
         deep: true,
         immediate: true
       }
     }

   106. 【Vue】`[Vue warn]: Failed watching path: "columns[6].editSilingHeader" Watcher only accepts simple dot-delimited paths. For full control, use a function instead.` [Vue $watch_如果有了可惜-CSDN博客](https://blog.csdn.net/jufjzq/article/details/107786849) watch 不能监听数组子元素的变化 107. 【Vue】watch 只监听一次：https://www.zhihu.com/question/414637440/answer/1414088153

   export default {
     data: {
       isReady: false
     },
     mounted() {
       this.$watch('isReady', function(newValue, oldValue){
         console.log(newValue);
       });
     },
   }

   108. 【Vue】ant-design-vue 表格设置背景色

   columns: [
       {
           title: '年份',
           dataIndex: 'nianfen',
           key: 'nianfen',
           align: 'center',
           scopedSlots: { customRender: 'year' },
           customHeaderCell: () => {
               return {
                   style: {
                       'color': '#ffffff',
                       'background-color': '#5E7CE0',
                   }
               }
           }
       }
   ]

   109. 【Vue】修改表格一行数据影响其它行对应数据 input @change 110. 【Vue】在 html 中根据某一条件展示对应数据时，同时将该数据赋给另外一个变量。`{{ variable = data for show }}

     
   <div v-if="table.columns[3].tempo!=='自定义'">
       <span>{{ table.dataSource[index].value = table.columns[3].factors[table.columns[3].tempo][index] }}</span>
   </div>
   

   111. 【CSS】禁止文本被双击选中：user-select: none;

   112. 【Vue】在 data 中定义一个对象 dad，dad 里有一个属性 son 还是对象，若通过 this.dad.son.grandson='something' 对该属性对象新添加一个属性 grandson，则 grandson 不属于响应式（动态改变其值，template 中并不会渲染），需要通过 this.$set(this.dad.son, 'grandson', 'something')来添加响应式，或者使用 this.$forceUpdate()。

   113. 【浏览器】在 localhost/measure 种下的 cookie 不能用在 localhost 里。

   114. 【CSS】元素宽度设置成 100 vw 后出现横向滚动条：Windows 系统中的滚动条会占据视口空间，但 vw 单位没有将滚动条的宽度计算进去。由于垂直滚动条的存在，导致宽度超出，从而出现横向滚动条。[译] 解决 100vw 下滚动条引发的问题 - 掘金 (juejin.cn)

   115. 【CSS】div 根据内容自适应宽度：width: fit-content;

   116. 【Vue】$attrs与$listeners的详解：Vue– $attrs与$listeners的详解 - 简书 (jianshu.com)

   117. 【CSS】赋 unset 值去除已有样式 text-overflow: ellipse;

        text-overflow: unset;

   118. 【JavaScript】JSON.parse(JSON.stringify(Infinity)) ==== null ~坑

        JSON.stringify(Infinity) === null

   119. 【JavaScript】JavaScript 中的数字在计算机内存中占 8 Byte。

        Javascript中，由于其变量内容不同，变量被分为基本数据类型变量和引用数据类型变量。基本类型变量用八字节内存，存储基本数据类型(数值、布尔值、null和未定义)的值，引用类型变量则只保存对对象、数组和函数等引用类型的值的引用(即内存地址)。
        js 中数字是不分类型，所有数字都是以双精度浮点数来存储的。即 64 位；但当任何数字在进行位运算时 内部会将其转换成 32 位有符号整型。

   120. 【uniapp】onload 和 created 在h5和小程序端不同的先后执行顺序https://github.com/dcloudio/uni-app/issues/2572

   121. 【json-server】post 数据只传入 id，content-type: ‘application/json;’ 不要加分号

   122. 【JavaScript】forEach与async/await坑

        async getImpressions(context, data) {
            const list = await context.dispatch('getComments', data)
            console.info('test-start')
            list.forEach(async item => {
                console.info('test-before')
                const obj = await context.dispatch('getCourseDetail', item.courseId)
                console.info('test-after')
                Object.assign(item, obj)
            })
            console.info('test-end')
            return list
        },

        

        async getImpressions(context, data) {
            const list = await context.dispatch('getComments', data)
            console.info('test-start')
            for (const item of list) {
                console.info('test-before')
                const obj = await context.dispatch('getCourseDetail', item.courseId)
                console.info('test-after')
                Object.assign(item, obj)
            }
            console.info('test-end')
            return list
        },

        

   123. 【JavaScript】根据 flag 来对一个对象赋予不同的属性

        const req = { user_id: this.userId }
        req[this.flag ? 'add' : 'remove'] = 'withdraw_apply'

   124. 【CSS】h5 链接在 whatsapp 上没有显示预览图，但在 ig 上可以正常显示。查了资料 为 WhatsApp 链接分享提供图片 - 编程宝库 (codebaoku.com) 发现图片尺寸大小不能超过 300kb，同时最小尺寸需要大于 300*200。

   125. 【CSS】在 span 里面换行，实际显示会多出一个空格。

   126. 【Vue】使用 extends 将弹窗封装为全局方法进行调用。通过vue.extend实现消息提示弹框 - 掘金 (juejin.cn)

   127. 【Typescript】Typescript: type‘string’|‘undefined’类型不能赋值给type‘string’。 - 问答 - 腾讯云开发者社区-腾讯云 (tencent.com)

   128. 【CSS】【转】CSS实现div的高度填满剩余空间 - yoyo002 - 博客园 (cnblogs.com)

   129. 【Vue】

        // 没有响应式
        const { visible = false, type = PrinterWarnType.TO_DOWNLOAD } = defineProps<{
          visible: boolean;
          type: PrinterWarnType;
        }>();
        // 有响应式
        const props = defineProps({
          visible: {
            type: Boolean,
            default: false
          },
          type: {
            type: String as PropType<PrinterWarnType>,
            default: PrinterWarnType.TO_DOWNLOAD
          }
        })

   130. 【JavaScript】Logical OR assignment(||=)

        const obj = {}
        // Classic
        if (!obj['key']) {
            obj['key'] = 'initVal'
        }
        
        // Logical OR assignment
        obj['key'] ||= 'initVal'

   131. 【JavaScript】禁止所有a标签跳转

        document.body.addEventListener('click', function (e) {
            // 兼容处理
            var target = event.target || event.srcElement
            // 判断是否匹配目标元素
            if (target.nodeName.toLocaleLowerCase() === 'a') {
                console.log('当前点击的 a 标签：', target)
        
                // 对捕获到的 a 标签进行处理，需要先禁止它的跳转行为
                if (event.preventDefault) {
                    event.preventDefault()
                } else {
                    window.event.returnValue = true
                }
            }
        })
        
        // 缺点：无法处理a标签中嵌套其它元素的情况

        const clickHandler = event => {
            // 阻止 a 标签点击事件的默认行为，即页面跳转
            event.preventDefault()
        }
        const aTags = document.getElementsByTagName('a')
        // 借用 Array.prototype.forEach 遍历处理 选到的 a 标签
        Array.prototype.forEach.bind(aTags)(a => {
            a.addEventListener('click', clickHandler)
        })

   132. 【Html】a标签嵌套a标签：前端页面a标签嵌套a标签效果的两种解决方案 - leung_blog - 博客园 (cnblogs.com)

   133. 【CSS】当 html 无法识别 \n 换行符，可以添加 white-space: pre-line;

   134. 【JavaScript】禁用页面所有点击事件

        document.addEventListener('click', function handler(e) {
            e.stopPropagation()
            e.preventDefault()
        }, true)

   135. 【CSS】-webkit-text-fill-color 会统一改变输入框字体颜色（包括 disabled 状态和 placeholder）。

   136. 【CSS】::-webkit-scrollbar 代表整个滚动条，::-webkit-scrollbar-thumb 代表滚动的滑块。

        .sidebar {
            &::-webkit-scrollbar {
                width: 8px;
                height: 0;
                background: #fff;
            }
            &::-webkit-scrollbar-thumb {
                width: 4px;
                background: #C1C1C1;
            }   
        }

   137. 【CSS】overscroll-behavior-y: contain; 可以让子元素滚动时，不会导致父元素的滚动。

        The overscroll-behavior-y CSS property sets the browser’s behavior when the vertical boundary of a scrolling area is reached.

   138. 【CSS】input 禁止获取焦点/输入

        <!-- readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本 -->
        <input type="text" value="禁止输入，可以使用Tab键切换到该字段" readonly="readonly">
        
        <!-- disabled：被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type="hidden"> 一起使用 -->
        <input type="text" value="可复制，不能接收焦点，字的颜色会变成灰" disabled="disabled">

   139. 【CSS】父元素设置 overflow: hidden，子元素设置 sticky 定位无效？

   140. 【Vue】组件功能描述注释参考示例

        /**
                 * A custom button component
                *
                * @props
                * @param {string} label - The text to display on the button
                * @param {string} type - The button type
                	@type {'primary' | 'secondary' | 'danger'}
                	@default 'primary'
                	@description
                	- 'primary': Represents the primary action.
             		- 'secondary': Represents a secondary action.
         			- 'danger': Represents a dangerous action.
                * @param {function} onClick - The function to call when the button is clicked
                *
                * @example
                * <custom-button 
                *   label="Click Me" 
                *   @click="handleClick" />
                *
                * @notice
                * The type prop must be either 'button' or 'submit'
                *
                * @limit
                * The onClick prop must be a function
                *
                * @use
                * This component can be used in forms, modals, or as standalone buttons.
                * It can also be customized with CSS to match the design of your application.
                */

   141. 【CSS】getBoundingClientRect().top 和 offsetTop 值不同