前端调试没有滚动条_记录最近遇到的几个前端小问题

前言：

---

本职Java后端偏大数据，但由于工作的需要，最近又狠狠写了一把Vue，对于前端的学习一直比较碎片化，所以遇到的-所谓的问题也是难度各异，在这里做一点记录，欢迎前端大佬指导。

本篇公号主要包括以下几个前端小问题：

• Js中const,var,let区别与用法

• vue报错:use a data or computed property based on the prop's value.

• vue报错:The data property "xxxxx" is already declared as a prop. Use prop default value instead.

• vue子组件给父组件传值

• Js如何跳出forEach循环

• Js生成8位随机数

• CSS鼠标悬浮某元素上变色

Js中const,var,let区别与用法

---

• 1.const 定义的变量，一旦定义后，就不能修改，即 const 声明的为常量，而且必须初始化。但是，并不是说 const 声明的变量其内部内容不可变，只是变量标识符不能重新分配。

const a = 1;//正确// const a;//错误，必须初始化 // a = 2;console.log(a);//Uncaught TypeError: Assignment to constant variable.

• 2.var 在函数内部声明，那么这个变量就属于当前函数作用域，如果声明是发生在任何函数外的顶层声明，那么这个变量就属于全局作用域。

  如果在声明变量时，省略 var 的话，该变量就会变成全局变量，如全局作用域中存在该变量，就会更新其值。所以var声明的变量会出现污染全局的情况，要特别注意。

  var定义的变量可以修改，初不初始化都可以，如果不初始化会输出undefined，不会报错。

var a = 1; //此处声明的变量a为全局变量function foo(){   a = 2;//此处的变量a也是全局变量   var b;//不报错；   var b=1;   b=2;//不报错；}

• 3.let是块级作用域，函数内部使用let定义后，对函数外部无影响，但是在同一个块级作用域，不能重复声明变量。

let a = 2;function change(){let a = 3;//正确let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared}

一个关于var 与let的经典的栗子：

for (var i = 0; i < 10; i++) {    setTimeout(function(){        console.log(i);    },100)};//输出10个10for (let i = 0; i < 10; i++) {    setTimeout(function(){        console.log(i);    },100)};//输出0-9

vue报错use a data or computed property based on the prop's value.

---

用父组件传值给子组件的过程中，对其直接修改就会报以上问题的错误 。

原因：prop是单向绑定，不能更改数据，只能由父组件传输过来 解决方法：可以在子组件中data中定义数据，使用$emit和$on传给父组件，父组件接收后在赋值给当前要修改的数据。

vue报错: The data property "XXXX" is already declared as a prop. Use prop default value instead.

---

在我们访问data 和methods中的数据之外，还访问了props组件传递过来的值，如果发现data数据字段中的key值已经被定义，那么props传的参数再有这个重名的key值就会报这个错误。

props的优先级 > data中的优先级 > menthods中的优先级例如：//下面就会报这个错误exports default(){    props:{        xxxxx:123    },    data(){        return {            xxxxx:'',        }       }}

vue子组件给父组件传值

---

介绍一个非常简单的子组件向父组件传值的方法：

//子组件函数中，利用.$emit()传递给父组件 var nodeMessage={    nodeId:_self.currentNode.nodeId,    nodeName:_self.currentNode.nodeName};_self.$emit('func2',nodeMessage);//func2: 是父组件指定的传数据绑定的函数，nodeMessage:子组件给父组件传递的数据

 //父组件来接收import taskNodeDialog from './taskNodeDialog'//子组件components:{taskNodeDialog}, .......

Js如何跳出forEach循环

---

我们知道传统的for循环下，我们可以通过break、continue、return来跳出循环，这个就不在这里赘述了。但是你知道怎么跳出forEach循环吗(前面的方式说明肯定不行啦)？见下：

//使用try···catch捕获异常来try {  var arr = [1, 2, 3, 4];  arr.forEach(function (item, index) {    //跳出条件    if (item === 3) {      throw new Error("LoopTerminates");    }    //do something    console.log(item);  });} catch (e) {  if (e.message !== "LoopTerminates") throw e;};

Js生成8位随机数

---

16位的uuid太长？试试下面这个可以指定长度与基数的函数：

这个可以指定长度和基数：uuid(8, 16) // "238GHr90"function uuid(len, radix) {      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');      var uuid = [], i;      radix = radix || chars.length;      if (len) {        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];      } else {        var r;        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';        uuid[14] = '4';        for (i = 0; i < 36; i++) {          if (!uuid[i]) {            r = 0 | Math.random()*16;            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];          }        }      }      return uuid.join('');  }

element-ui中的表格el-table滚动条样式修改

---

el-table默认的滚动条宽度也忒宽了，可能难点只是在于找不到对应的元素(/deep/ .el-table__body-wrapper)，修改还是比较简单的，见下：

 // 滚动条的宽度/deep/ .el-table__body-wrapper::-webkit-scrollbar {    width: 8px; // 横向滚动条    height: 8px; // 纵向滚动条 必写}// 滚动条的滑块/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {    border-radius: 10px;    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    background: rgba(180, 180, 180, 0.53);}// 外层轨道/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    border-radius: 0;    background: rgba(0,0,0,0.1);}

CSS鼠标悬浮某元素上变色

---

项目中自定义了一些span元素，并加上了click事件，鼠标是设置成了小手的悬浮显示，但是没有明显的button感觉呀，那就自己修改一下悬浮颜色吧～

缩小.......hoverIcon:hover{    color: rgba(255, 84, 43, 0.85);}

总结：

---

冷吗？冷就对了，温暖是留给开小轿车的人。早安，共享单车人 ！

每天对着空气挥一拳，不为别的，就为干这个世界！早安，打工人！

打工可能会少活十年，不打工你一天也活不下去。早上好，打工人！

打工不仅能致富，还能交友娶媳妇。打工人，打工魂，打工都是人上人。

家人们早上好 ! 喜欢的朋友，记得点赞?关注➕

---