「时光不负,创作不停,本文正在参加2021年终总结征文大赛」
项目架构 Vue + elementUI + 潘家成vueadmin后台框架 +elementUI
- 网络请求使用axios,并对其进行二次封装。将请求在/api文件模块化,按需引入
- 路由采用vue-router
- 使用vuex进行同一状态管理
工作成果
封装用户全局设置组件,使其可以在两个页面实现复用。
一些心得(想到哪,记到哪)
1. 更改elementUI组件默认样式。
- 解决方法:
- 设置行内样式,通过返回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 属性
个人觉得可能会用到比较多的
3.超出文本...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
4. 数组快速去重(基本数据)
const arr = [1, 2, 3, 4, 5, 6];
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)