最近工作遇到的小问题

总结了下最近半年来在工作中遇到的一些开发小问题

1.flex布局设置justify-content: space-between后，左对齐问题

   flex布局设置justify-content: space-between后，最后一行可能还会出现分隔两边的情况，如图1，但此时我们一般想要的结果是最后一行就按序从左到右排就可以了，如图2。

 图1

图2

解决方法是，给父级元素设置伪元素，宽度为子元素一样的宽度

<style>    .box {      width: 300px;      display: flex;      justify-content: space-between;      flex-wrap: wrap;    }    .child {      width: 90px;      height: 30px;      margin-bottom: 20px;      border: 1px solid black;    }    .box:after {      content: "";      width: 90px;    }  </style>  <div class="box">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>  </div>

但是这个解决方法也有一个不完美的地方，如果每行的元素超过了3个，这个方法就会无效了。如图3。

图3

目前的解决方案是添加空元素，宽与子元素相等，不设高度，占个位置：如图4

图4

    .empty {      width: 60px;    }
 <div class="box">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="empty"></div>    <div class="empty"></div>  </div>

目前这个方法最好已知最后一行缺几个元素则设置几个空元素，如果空元素的占位数量不够还是会出现没有左对齐的情况，不知各位大佬有没有完美的解决方案。

2.伪类 :last-child与:last-of-type区别

:last-child 选择器用来匹配父元素中最后一个子元素；

:last-of-type 选择器用来表示一组兄弟元素中它的类型的最后一个元素。

来看效果：

<style>    .box {      display: flex;    }    .child {      width: 60px;      height: 30px;      margin-bottom: 20px;      border: 1px solid black;    }    .child:last-child {      background-color: red;    }  </style>  <div class="box">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>  </div>

此种情况可以实现为最后一个元素设置特殊效果的。但是如果：

  <div class="box">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div>我没有child样式哦</div>  </div>

我又在box元素的子级添加了一个class不是child的元素，这时特殊设置就不再管用了。

这种情况我换一下

    .child:last-of-type {      background-color: red;    }

如此还是无法达到效果，经查验，只有改变了元素类型才会生效

  <style>    .box {      display: flex;    }    .child {      width: 60px;      height: 30px;      margin-bottom: 20px;      border: 1px solid black;    }    .child:last-of-type {      background-color: red;    }  </style>  <div class="box">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <p>我不是div哦</p>  </div>

3.textarea去掉右下角条纹

textarea右下角的条纹是可以供用户自己调整文本框大小，如果想去掉这个条纹也很简单，设置一个属性即可。

 textarea{      resize:none;    }

4.input设置placeholder的样式

input::-webkit-input-placeholder {      color: red;    }    /* 使用webkit内核的浏览器 */ 
input:-moz-placeholder {       color: red;    }    /* Firefox版本4-18 */   
input::-moz-placeholder {      color: red;    }    /* Firefox版本19+ */    
input:-ms-input-placeholder {      color: red;    } /* IE浏览器 */

5.input设置type=number，仍然可以输入e

当把input设置为type=number，我们定是只想让用户输入数字，但是e是一种科学计数法符号，也是可以被输入的，无论在英文还是中文状态下。如下

<input type="number" >

如果不想让用户输入e，可以这样

<input 
  type="number" 
  onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))">

如此设置，在输入法为英文状态下，用书将输入不了e，但是在输入法为中文的情况下，还是可以输入。

6.通过js修改css变量的值

  <style>    :root {      --myColor: red;    }    .prop {      color: var(--myColor)    }  </style>  <div class="prop">自定义属性</div>  <div id="change">点我改变字体颜色</div>  <script>    document.getElementById('change').onclick = function () { document.documentElement.style.setProperty('--myColor', 'blue') }  </script>

7.使用watch同时监听两个属性

 我们当然也可以在watch下分别写两个属性的相关操作，但这么写可以会是代码变得冗余，因此，我们可不可以找到一种相对简单的方法呢

data() {    return {      prop1:'',      prop2:'',      value:null    }  },  computed:{    watchProps(){      let {prop1,prop2} = this      return {prop1,prop2}    }  },  watch:{    watchProps(newVal){        if(newVal.prop1 ==='a' && newVal==='b'){          this.value='new'        }else{          this.value='old'        }    }  }