前端页面开发总结--TBC

• active的点击切换

假设使用的是Vue，且是循环的情况下，可参照如下示例：

data { active: '默认高亮的那个item的key'}
activeClick(item){ this.active = item.key }
如果是固定静态的元素，也可按照如此思路。

---

• elementUI的走马灯的图片大小和位置的设定

---

• 一行文字溢出部分用省略号代替

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

• 想让 li 的间距舒服，可以使添加样式
  padding-inline-start: 20px;

---

• 想让 li 水平排列，给每个 li 添加float就好

---

• 想要输入框内含有icon

  
  
  
  
  
  
  
  
      
      
  
    ```
  ---
  

• 在使用antd的form组件时，注意：
  由于 Angular Form 目前提供的状态变更订阅不完整。手动更改表单状态时，例如 markAsDirty 后，需要执行 updateValueAndValidity 通知 nz-form-control 进行状态变更。

  对于浅显的使用来说，如果只是需要输入框之类的，就不要使用nzForm，因为改变表单内数据时，状态更新不及时，会导致获取到了值，但是显示不出来的情况。

---

• 删除数组元素
  先获取要删除元素的下标，然后通过splice方法删除该元素，不要去获取返回值，该方法会直接修改原数组，需要什么操作直接调用原数组就好。

  var index = array.indexOf(要删除的元素 );
  array.splice(index,1);
  //index是要删除开始的位置，1是从index的位置删一个元素。
  

---

• 在angular项目中使用monaco-editor时，按照GitHub上面的步骤来安装配置时，请注意，有关于ngx-monaco-editor这个项目有多个。请选择一个进行配置即可，因为一不小心你可能就弄混了你用的是哪一个，他们的配置和导入方式是不同的，如果弄混了，就会导致页面效果加载不出来的问题。
  
  https://github.com/atularen/ngx-monaco-editor#readme
  https://github.com/materiahq/ngx-monaco-editor
  （反正我是真的笨，一不小心把这两个搞混了，配了半天）

---

• yarn与npm
  

---

tbc