My随手记

一、JS篇

1、如何打印数据实际值

前端-浏览器-遇到打印出来的对象有属性、访问length却为0、怎么办

console.log(JSON.parse(JSON.stringify(this.userOptions)));

2、rem基本设置

// 原始配置
function setRem () {
    let doc = document.documentElement;
    let width = doc.getBoundingClientRect().width;
    let rem = width/10;
    doc.style.fontSize = rem + 'px';
    console.log(rem);
}
// 监听窗口变化
addEventListener("resize",setRem);

3、EventLoop 事件循环机制

个人理解：

// 循环机制
// 第一个宏任务：script宏任务/同步任务 --> 微任务
// 第二个宏任务：script宏任务/同步任务 --> 微任务
// ...
// 如此反复、形成循环
// 注意：
// 1、除了script宏任务/同步任务之外、其他宏任务均为一个循环周期
// 2、执行微任务时：同样采用 循环机制

二、VUE篇

2.1、element-ui

2.1.1 解决el-input maxlength限制长度无效问题

<el-input  maxlength="11" placeholder="请输入手机号" type="number"></el-input>

结果，发现页面上无限输入都可以。
使用οninput=“if(value.length>11)value=value.slice(0,11)” 截取长度显示即可。

 <el-input  oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请输入手机号" type="number"></el-input>

2.1.2 tree组件获取当前选择所有数据（含半选中父节点）数组

获取方法如下

this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())

将getCheckedKeys()和getHalfCheckedKeys()两个方法获取的数据合并就是

2.2 启动vue项目

2.2.1 当node-sass与node.js版本不一致时

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64) For more information on which environments are supported please see:

当启动vue项目时遇到node-sass与node.js版本不一致的时候、除了更新node-sass版本、也可以回退node版本

三、微信小程序篇

3.1 自定义标题栏“navigationStyle“: “custom“ 修正版

写一个标题栏组件，实现与胶囊对齐

 lifetimes:{
        attached: function () { 
            let bar = wx.getMenuButtonBoundingClientRect()		// 获取胶囊丸信息
            // 胶囊的top有时候获取到是0 ，所以兼容 statusBarHeight（刘海的高度，原生标题栏的top，比胶囊的top高一些）
            let top = bar.top || wx.getSystemInfoSync().statusBarHeight+4	
            this.setData({
                //height: bar.height,	// 标题栏高度与胶囊 高度相同，适用于透明标题栏。
                height: bar.height + top,	// 标题栏高度与胶囊 高度相同，适用于透明标题栏。
                top	// 标题栏top。如果标题栏高度比胶囊大，设置为 top - (navigationHeight - bar.height)/2
            })
        }
  },