前端工作学习随笔(一)

202 阅读1分钟

「时光不负,创作不停,本文正在参加2021年终总结征文大赛

项目架构 Vue + elementUI + 潘家成vueadmin后台框架 +elementUI

  • 网络请求使用axios,并对其进行二次封装。将请求在/api文件模块化,按需引入
  • 路由采用vue-router
  • 使用vuex进行同一状态管理

工作成果

封装用户全局设置组件,使其可以在两个页面实现复用。

一些心得(想到哪,记到哪)

1. 更改elementUI组件默认样式。

  • 解决方法:
    1. 设置行内样式,通过返回data中的数据更改。
<el-button :style="selfstyle">默认按钮</el-button>
<script>
	export default {
		data() {
			return {
				selfstyle: {
					color: "white",
					marginTop: "10px",
					width: "100px",
					backgroundColor: "cadetblue"
				}
			};
		}
	}
</script>

2.另外写一个style标签,但是不要写scoped,为了防止影响到其他组件的elementUI的使用建议最外层套一层父盒子并指定类名。在其中修改样式即可。

2. css3 transform 属性

个人觉得可能会用到比较多的

image.png

3.超出文本...

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

4. 数组快速去重(基本数据)

const arr = [123456];
const arr2 = new Set(arr); 
const arr3 = [...arr2];

5.遍历对象

尽量避免使用for循环 使用Object.entries或Object.keys将对象转换为数组

Object.entries.forEach(([key,val]) => {
    // ......
})

如果需要break功能则使用find方法,找到符合条件的一项即可停止遍历

6. 简化if判断

if([1,2,3,4].includes(a)) {
    //...
}

效果相当于if (a === 1 || a === 2 || a === 3 || a === 4)