vhr项目地址： https://github.com/lenve/vhr
项目作者： https://blog.csdn.net/u012702547
响应函数分析
- mounted： html加载完成之后执行。顺序是子组件->父组件。
- created: html加载完成之前执行。顺序是 父组件->子组件。
- methods： 事件方法执行。
- watch： 监听一个数值的变化，然后执行相应函数。
- computed： 设置依赖关系。
- loadNF(): 使用get请求" /chat/sysmsgs "，后isDot=false。遍历响应数据( resp.data.forEach(msg=>{ 如果msg.state是0，isDot设置为true }) )。若有msg的state为0，则el-badge带有小圆点。
- goChat: 点击el-badge所产生的小红点，跳转入/chat页面（Chat组件）。
- el-dropdown的@command采用handleCommand函数： 一参数名为cmd，由el-dropdown-item的command给cmd值，判断cmd，辨明选择的组件。若选了“logout”，调用this.$confirm(…).then(…).catch(…);
CSS选择器分析
| 属性 | 数值 | 描述 |
|---|---|---|
| position | absolute | 绝对位置 |
| text-align | center | 文本居中 |
| display | flex | 作为弹性伸缩盒显示，任何容器皆可用 |
| padding | 0px | 内边距 |
| box-sizing | content-box | 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框 |
| align-items | center | 子项目居中 |
| justify-content | space-between | 项目位于各行之间留有空白的容器内。 |
| margin | 外边距 | |
| cursor | pointer | 光标改编为一只手 |
版权声明：本文为technique_otaku原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。